客户端存储 sessionStorage ， localStorage和cookie

sessionStorage 和 localStorage均为一个对象（一个持久化关联数组），索引（键名）和值（键值）都由字符串形式显示

两者不同之处在于对数据的有效期（存储多久）和作用域（不同的网站是否共享数据）

cookie除了名和值，还有一些可选的属性来控制cookie的有效期和作用域。

存储大小

sessionStorage 和 localStorage可以存储5MB的数据，而cookie不得超过4KB

有效期

sessionStorage 在浏览器关闭或者相应数据保存的网页（标签页）关闭，该网页的sessionStorage 内容将被清空，而localStorage则一直保留，除非代码设置清空或用户通过设置浏览器配置删除。

cookie的有效期是当整个浏览器关闭，随之消失。也可以通过max-age属性设置cookie的有效期时长。

作用域

localStorage的作用域是限定在文档源级别（文档源是通过协议，主机名以及端口号确定的，任意一项不相同，即是不同源的），同源的共享同样的localStorage数据，可相互读取甚至覆盖。（不用浏览器不可共享，如谷歌浏览器不可访问IE浏览器的数据）

sessionStorage的作用域也是限定在文档源级别，同时其还被限制于自己窗口下，即两个同源的标签页是不能共享数据的。如果一个窗口下有两个iframe元素，且包含的文档是同源的，那么这两者是可以共享数据的。

cookie也是通过文档源和文档路径来确定的，默认情况下，创建cookie 的web页中的cookie数据可以与该页面的同目录或者子目录共享。（作用域可以通过path和domain属性配置）

sessionStorage的方法（localStorage一样）：

可以通过以下方式对其设值或添加值

    window.sessionStorage.setItem('name','zjf');
    window.sessionStorage['name'] = 'zjf';
    window.sessionStorage.name = 'zjf';

可以通过以下方式获取索引字符串对应的值

    let name = window.sessionStorage.getItem('name');
    let name = window.sessionStorage['name'];
    let name = window.sessionStorage.name;

可以通过以下方式删除索引字符串对应的值

    window.sessionStorage.removeItem('name');
    delete window.sessionStorage.name; //低版本浏览器不一定支持

删除所有保存的数据

    window.sessionStorage.clear();

通过length和key()方法枚举所有存储的数据

    for(var i = 0; i < window.sessionStorage.length; i++) {
        var name = window.sessionStorage.key(i);
        var value = window.sessionStorage.getItem(name);
        console.log(name + ':' + value);
    }

cookie的方法

保存cookie

    function setcookie(name, value, daysToLive) {
        //存储前需encodeURIComponent()对值进行编码，读取时需要decodeURIComponent()解码
        var cookie = name + "=" + encodeURIComponent(value);
        if(typeof daysToLive === "number") {
            cookie += "; max-age=" + (daysToLive * 60 * 60 * 24);
            cookie += "; path=" + (地址);
            //各种属性可按以上格式添加
        }
        document.cookie = cookie;
    }

读取cookie

    function getcookie() {
        var cookie = {};
        var all = document.cookie;
        if(all === "") return cookie;
        var list = all.split(";"); //分离出名、值对
        for(var i = 0; i < list.length; i++) {
            var cookie = list[i];
            var p = cookie.indexOf("=");//找到第一个‘=’的索引
            var name = cookie.substring(0, p);//获取‘=’前的名
            var value = cookie.substring(p+1);//获取‘=’后的值
            value = decodeURIComponent(value);
            cookie[name] = value;
        }
        return cookie;
    }