重温前端之本地存储

cookie

长度限制

每个域 cookie 个数小于 50 个，单条 cookie 总长度 4kb

过期时间 expires

过期时间，默认为关闭浏览器时全部失效，设置后可以让过期后才无法访问

域名 domain

可访问 cookie 的域，默认只有在当前网站下有访问权限，可以使用 domain 属性实现子域访问

如在a.com中设置了cookie，想让b.a.com访问到
可以设置domain为.a.com，即可实现跨域

httpOnly

不允许浏览器读取 cookie，可以防止 csrf 攻击

api

• 查：使用domcument.cookie即可读取全部
• 增/改：document.cookie="user=admin"，只会更新其中写到的 cookie，而不会涉及其他 cookie
• 删：通过设置expires过期来实现，有时需要加上域名domain

api封装

    function setCookie(name,value,n){
        var oDate = new Date();
        oDate.setDate(oDate.getDate()+n);
        document.cookie = name+"="+value+";expires="+oDate;
    }
    function getCookie(name){
        var str = document.cookie;
        var arr = str.split("; ");
        for(var i = 0; i < arr.length; i++){
            var newArr = arr[i].split("=");
            if(newArr[0]==name){
                return newArr[1];
            }
        }
    }
    function removeCookie(name){
        setCookie(name,1,-1);
    }

localStorage/sessionStorage

区别

存储方式	长度限制	过期时间	作用域
localStorage	5M	永久	可以浏览器不同窗口/不同 tab
sessionStorage	5M	页面关闭时	不可以浏览器不同窗口/不同 tab

api

• 增/改：localStorage.setItem('myCat', 'Tom');
• 查： localStorage.getItem('myCat');
• 删：localStorage.removeItem('myCat');
• 清空：localStorage.clear();