web存储

常见的web存储主要有cookie、sessionstorage、localstorage三个，这里分别记录三者的用法以及区别

1.cookie

每次http请求都会在请求头cookie中发送到服务器，比如我们打开csdn时，在控制台找到一个XHR

cookie是有大小限制的，差不多4KB，当超过这个最大尺寸限制，该cookie会被默认丢掉。

cookie有几个信息组成：名称、值、域、路径、失效时间、安全标志。

名称和值需要经过URL编码，就是在我们设置cookie时，需要调用encodeURIComponent()包装一下。

js中访问和设置cookie使用的是document.cookie属性，打印csdn个人主页下的cookie

输出的是name1=value1;name2=value2;name3=value3这样的字符串

设置cookie时，只会添加新的一条cookie，或者当前cookie名已经存在才会覆盖。例如：

document.cookie = encodeURIComponent('name') + '=' + encodeURIComponent('tom') + ';domain=wrox.com;path=/'

由于JS中的读写cookie没有特定的接口函数，不太方便，所以我们可以封装一个CookieUtil对象

var CookieUtil = {
    // 获取指定的cookie
    get(name) {
        var cookieName = encodeURIComponent(name) + '=',
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = null;
        // 如果cookie中有指定的cookie
        if(cookieStart > -1){
            var cookieEnd = document.cookie.indexOf(';',cookieStart);
            if(cookieEnd === -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd))
        }
        return cookieValue;
    },
    // 设置cookie
    set(name,value,expires,path,domain,secure){
        var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
        if(expires instanceof Date){
            cookieText += ';expires=' + expires.toUTCString();
        }
        if(path){
            cookieText += ';path=' + path;
        }
        if(domain){
            cookieText += ';domain=' + domain; 
        }
        if(secure){
            cookieText += ';secure';
        }
        document.cookie = cookieText;
    },
    // 删除cookie
    unset(name,path,domain,secure){
        this.set(name,'',new Date(0),path,domain,secure);
    }
}

内部创建了三个方法，get()获取指定cookie值，set()设置一条cookie，unset()通过设置cookie失效时间为过去时间，来删除一条cookie

也可以使用jQuery的cookie插件来更加方便的管理cookie。

2.sessionStorage

sessionStorage对象存储特定的某个会话的数据，保持数据到浏览器关闭。数据只在相同协议、相同域名、相同接口下的页面之间共享。

例如我在csdn主页下设置sessionStorage的一个值，然后我在个人首页下可以访问的到。

// 使用方法存储数据

sessionStorage.setItem('name', 'tom');、

// 使用方法获取数据

sessionStorage.getItem('name');

比较常用于页面的广告显示和关闭，当关闭页面的广告时，设置一个true值存储到sessionStorage中，刷新页面或者访问页面其他子页面时，广告就不会显示。当关闭浏览器重新打开页面，广告就会再次显示出来。

3.localStorage

localStorage对象存储的值会一直保存在浏览器客户端，关闭浏览器后再次打开仍然存在。这一点和sessionStorage不一样，可以设置一些用户偏好设置。存储数据和获取数据的方法也是setItem() getItem()