HTML5 本地存储(localStorage)、会话存储(sessionStorage)和 Cookie 的区分

一、本地存储 和 会话存储

本地存储(localStorage)：长时间的保存在电脑本地，不同页面之间都能互相读取本地存储的数据。

会话存储(sessionStorage)：只限于当前页面，当前页面关闭，数据就清除了。

Cookie不适合大量数据的存储，这样会速度很慢效率不高。WEB存储使在不影响网站性能的情况下存储大量数据成为可能。

注意：不管是 localStorage 还是 sessionStorage ，存储的都是字符串，使用和存储时别忘记做相应的转换。

兼容性：

IE6-7使用cookie保存数据。

localStorage 和 sessionStorage方法大致一样，最常用的是这几个：

1.getItem(key);获取指定key本地存储的值

 2.setItem(key,value);将value存储到key字段

 3.removeItem(key);删除指定key本地存储的值

 4.clear();清除所有的本地存储

 5.length;读取本地存储的键值对个数

 6.key(i);读取本地存储第 i 个 key 的名称，i 从0开始

 7.storage事件：当本地存储的数据发生变化时会触发此事件，包含的属性有：

storageArea: 表示存储类型（Session或Local）

key:发生改变项的key

oldValue: key的原值

newValue: key的新值

url*: key改变发生的URL

* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没

有url属性，则应该使用uri属性。

如果调用clear()方法，那么key、oldValue和newValue都会被设置为null。

PS：在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是

同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的

storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件。

var arrDisplay = [0, 1, 1, 1];

//存储，IE6~7 cookie 其他浏览器HTML5本地存储
if (window.localStorage) {
    localStorage.setItem("menuTitle", arrDisplay);	
} else {
    Cookie.write("menuTitle", arrDisplay);	
}

var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");	

strStoreDate.split(",").forEach(function(n, i) {
    //n是当前的值，i是当前的下标。
});

var storage = window.localStorage;  
for (var i=0; i < <span style="font-family: Arial;">storage.length</span>; i++){  
    var key = storage.key(i);  
    var value = storage.getItem(key);  
    console.log(key + "=" + value);  
}  

2017.10.17从W3C看到的最新版本：可以把WEB存储直接看成一个对象调用，每次设置或获取某个值时不用调用以前 getItem() 这种方法了（以前的方法用还是能用的）。

sessionStorage.lastname="Smith";
console.log(sessionStorage.lastname);

二、浏览器 Cookie

应用场景：1、Cookies最典型的应用是判定注册用户是否已经登录网站。

                  2、另一个重要应用场合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookies，以便在最后付款时提取信息。

方法：

1、设置 Cookie

function setCookie(name, value, expiresTime){
        var date = new Date();
        // expiresTime 以天计算
        date.setTime(date.getTime()+expiresTime*24*3600*1000);
        document.cookie = name + "=" + value + ((expiresTime == null) ? "" : ";expires="+date.toGMTString());
    }

2、读取 Cookie

function getCookie(name)
{
   var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
   if(arr=document.cookie.match(reg))
      return decodeURI(arr[2]);
   else
      return null;
}

3、删除 Cookie
      原理就是设置过期时间为过去的某个时间。

function delCookie(name){
         var date = new Date();
         date.setTime(date.getTime() - 10000);
         document.cookie = name + "=-1;expires=" + date.toGMTString();
    }

4、获取所有的 Cookie

document.cookie  // name=Jim;age=22;gender=man