一个计算机技术爱好者与学习者

0%

Cookie、localStorage和sessionStorage

发表于 分类于 ，

1. 前言

在《使用accessToken记录登录状态》一文中，已经讨论了Cookie的增删查改。
本文详细探讨一下Cookie、localStorage和sessionStorage的概念差别，以及localStorage的用法。

2. Cookie

Cookie的特点是小，只有4k，常用来存储辨别用户信息的数据，比如accessToken。而且，Cookie有数量限制，每个特定的域名下，最多生成50个Cookie（IE7+）。最大的优势是几乎所有的浏览器都支持。

3. localStorage

localStorage 是 HTML5 标准中新加入的技术，拥有5M的存储空间，主流浏览器都支持。

3.1. 存储

1
2
3
4
5
6
7
8
9
10
11
12
if(window.localStorage){
    var x = window.localStorage.userInfo? JSON.parse(window.localStorage.userInfo):{};
    if((x.unionid == undefined) || (x.unionid == "undefined")){
        var temp = {
            unionid: $('#unionid').val(),
            openid: $('#openid').val(),
            nickname: $('#nickname').val(),
            headimgurl:$ ('#headimgurl').val()
        };
        window.localStorage.userInfo = JSON.stringify(temp);
    }
}

3.2. 读取

1
2
3
var temp = (window.localStorage && window.localStorage.userInfo)?JSON.parse(window.localStorage.userInfo):{}
var unionid = temp.unionid;
console.log(unionid);

4. sessionStorage

sessionStorage和localStorage非常相似，最主要的差别，是生命周期。localStorage除非被清除，否则永久保存；sessionStorage关闭页面或浏览器后被清除。

5. 异同

特性CookielocalStoragesessionStorage
数据的生命期可设置失效时间，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小4K左右一般为5MB一般为5MB
与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性需要程序员自己封装，源生的Cookie接口不友好源生接口可以接受，亦可再次封装来对Object和Array有更好的支持源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

6. 书签

详说 Cookie, LocalStorage 与 SessionStorage
https://segmentfault.com/a/1190000002723469

HTML5 localStorage本地存储实际应用举例

谈谈本地存储利弊Cookie、localStorage、sessionStorage
http://www.tuicool.com/articles/fM32ier