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); } };
参考地址: