一、cookie

1. cookie 限制 4KB ，会在服务端和客户端之间来回传送，安全性低；小量的需要来回传送的才适用 cookie，可能需要加密

2. 存取删：

var demo = {
    setCookie: function (cname, cvalue, exdays) { // 设置cookie
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    },

    getCookie: function (cname) { // 获取cookie
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1);
            if (c.indexOf(name) !== -1) return c.substring(name.length, c.length);
        }
        return "";
    },

    removeCookie: function (cname) { // 删除cookie：将过期时间设置为一个过去的时间
        this.setCookie(cname, '', -1);
    }
};

二、sessionStorage

window.sessionStorage.setItem("username", "wxm"); // 存
window.sessionStotage.getItem("username"); // 取
window.sessionStotage.removeItem("uaername"); // 删

三、localStorage

和sessionStorage的存取删方式相同

四、sessionStorage 和 localStorage 区别

在于 数据存在的时间范围 和 页面范围；

1. localStorage 可以被同源的每个窗口和标签共享；

2. sessionStorage：

• 本页面 js 打开一个新标签页：会将本页面的 sessionStorage 传递过去，但之后互不影响

• 本页面 HTML 里嵌套 iframe：iframe 加载的时候能拿到父当前的 sessionStorage，之后则互不影响。

• 本页面 js 加载 iframe：当 iframe 还没设置 src 的时候，跟父是用的同一个 sessionStorage;设置 src 时会传递父的 sessionStorage，之后互不影响。

• 本页面 js 在自身跳转页面：共享

• sessionstorage 移动端：跳转到其他模块再回来，session 还在，退出到架构主页面，再进 业务组 就没了。

五、注意点

1. 命名时不宜太简单，否则多项目之间可能会覆盖，互相污染。可以使用：项目名 + 当前环境 + 项目版本 + 模块id + 缓存key

2. 要设置过期时间时，将value包装成一个对象，对象中有相应的时效时段，当下一次想获取缓存值时，判断有无超时，不超时就获取value，超时就删除这个缓存

image