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者的浏览器支持

3者的不同

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/