客户端 localStorage, sessionStorage, cookie 的区别

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对！

区别在于前两者属于WebStorage，创建它们的目的便是存储客户端数据。要保存必须域名是同源的。
而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。
LocalStorage和SessionStorage都是本地存储，不会被发送到服务器上。

1. cookie
cookie是存储在客户端的小型文本文件;

浏览器怎么设置 cookie, 控制台 document.cookie='a=1', 那么同个域名下的多个浏览器标签页都会共用这个 cookie,
比如 www.xxx.com/(A页) 和 www.xxx.com/?act=bbb(B页); 先同时打开这2个标签页, 在A页面document.cookie='a=1', 那么B页也带了这个 cookie;

若此时在A页 控制台 document.cookie='a=8', 不用刷新 B页, 控制台输入document.cookie 也有 'a=8'; 刷新 A页 还是有 'a=8'; 关闭 A页 和 B页, 但是不关闭浏览器, 再打开 A页, 还是有 'a=8'; 直到整个浏览器都关闭了, 就没有 'a=8';

所以如果在浏览器端生成Cookie，默认是关闭浏览器后失效。若想在关闭浏览器以后不失效，可以设置一个过期时间, 代码如下:

var exp = new Date();
// 30 秒后过期
exp.setTime(exp.getTime() + 30 * 1000);
document.cookie='a=1;expires=' + exp.toGMTString();

那么关闭浏览器再打开, 则'a'还在, 但是过了 30秒, 'a' 就变成 null.

 

2. sessionStorage

若先打开2个标签页, A页和B页, A页控制台输入 sessionStorage.setItem('a', 1), 注意此时B页 输入sessionStorage.getItem('a') 值为null, 但是此时若从A页 跳转到C页(C 和 B 是带同一个URL的 不同标签页), 只有 C页带 'a', B页还是不带'a', 此时刷新B页 还是不带 'a';

总结起来就是, 必须是从A页 跳转的或新打开的标签页会带 'a';
若A页带'a', 则新标签页再打开一个A页 也会带'a';
若A页带'a', 地址栏输入C页 会带'a';(有点像 A页跳转过去)
若A页和B页都带'a', 关闭 A标签页, 再打开 A标签页不带 'a', 这时必须从 B页带过去。

关闭浏览器则会清除 'a', 并且不能像 cookie 一样设置过期时间;

 

3. localStorage
localStorage 和 Cookie 的表现形式一样, 若先打开A 和B 标签页, A 页 localStorage.setItem('a', 1), 则B页 localStorage.getItem('a') 也有 'a';

localStorage 永远都不会被删除, 除非 调用了 localStorage.removeItem('a'); 或者清空所有item localStorage.clear();

 

总结:

3者的浏览器支持 

特性	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	3.5	8	10.50	4
sessionStorage	5	2	8	10.50	4

 

3者的不同

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

 

cookie 封装好的设置代码:

var CookieUtil = {
    get: function (name){
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
            
        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;
    },
    
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
    
        if (path) {
            cookieText += "; path=" + path;
        }
    
        if (domain) {
            cookieText += "; domain=" + domain;
        }
    
        if (secure) {
            cookieText += "; secure";
        }
    
        document.cookie = cookieText;
    },
    
    unset: function (name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }

};

 

参考地址:

http://jerryzou.com/posts/cookie-and-web-storage/