Cookie, LocalStorage 與 SessionStorage的區別

首先它們的作用都是儲存數據，但是具體的作用各有千秋：

1.sessionStorage，首先‘session’是會話的意思， sessionStorage 它可以將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。

2.localStorage，本地緩存，除非被清除，否則永久保存。

3.cookie，首先‘cookie’是小餅乾的意思，顧名思義，cookie確實很像，它的大小限制爲4KB左右，可以設置失效時間，默認關閉瀏覽器後失效。

下面我來說一下它們的用法：

1)sessionStorage的讀取：sessionStorage.getItem("key");

sessionStorage的存放：sessionStorage.setItem("key", "value");

sessionStorage中刪除某一個值：sessionStorage.removeItem("key")；

清空所有的sessionStorage值：sessionStorage.clear();

 

2)localStorage的讀取：localStorage.getItem("key");

sessionStorage的存放：localStorage.setItem("key", "value");

sessionStorage中刪除某一個值：localStorage.removeItem("key")；

清空所有的sessionStorage值：localStorage.clear();

當然作爲html5中的Web Storage儲存方式，不但可以用自身的setItem,getItem等方便存取，也可以像普通對象一樣用點(.)操作符，及[]的方式進行數據存儲，像如下的代碼：

var storage = window.localStorage; 
storage.key1 = "hello"; 
storage["key2"] = "world"; 
console.log(storage.key1);
 console.log(storage["key2"]);

localStorage和sessionStorage的key和length屬性實現遍歷

sessionStorage和localStorage提供的key()和length可以方便的實現存儲的數據遍歷，例如下面的代碼：

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){     
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value); 
}

storage還提供了storage事件，當鍵值改變或者clear的時候，就可以觸發storage事件，如下面的代碼就添加了一個storage事件改變的監聽：

if(window.addEventListener) { 	
    window.addEventListener("storage",handle_storage,false); 
}else if(window.attachEvent) { 
	    window.attachEvent("onstorage",handle_storage); 
    } 
    function handle_storage(e){
 	    if(!e){e=window.event;
    }	 
}

3)cookie:它的內容主要包括：名字，值，過期時間，路徑和域。路徑與域一起構成cookie的作用範圍。若不設置過期時間，則表示這

 

個cookie的生命期爲瀏覽器會話期間，關閉瀏覽器窗口，cookie就消失。這種生命期爲瀏覽器會話期的cookie被稱爲會話cookie，

 

會話cookie一般不存儲在硬盤上而是保存在內存裏，當然這種行爲並不是規範規定的。若設置了過期時間，瀏覽器就會把cookie

保存到硬盤上，關閉後再次打開瀏覽器，這些cookie仍然有效直到超過設定的過期時間。存儲在硬盤上的cookie可以在不同的瀏

覽器進程間共享，比如兩個IE窗口。而對於保存在內存裏的cookie，不同的瀏覽器有不同的處理方式

session機制。session機制是一種服務器端的機制，服務器使用一種類似於散列表的結構（也可能就是使用散列表）來保存信息。 當程序需要爲某個客戶端的請求創建一個session時，服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識（稱爲session id），如果已包含則說明以前已經爲此客戶端創建過session，服務器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），如果客戶端請求不包含session id，則爲此客戶端創建一個session並且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字符串，這個session id將被在本次響應中返回給客戶端保存。保存這個session id的方式可以採用cookie，這樣在交互過程中瀏覽器可以自動的按照規則把這個標識發送給服務器。一般這個cookie的名字都是類似於SEEESIONID。但cookie可以被人爲的禁止，則必須有其他機制以便在cookie被禁止時仍然能夠把session id傳遞迴服務器。

經常被使用的一種技術叫做URL重寫，就是把session id直接附加在URL路徑的後面。還有一種技術叫做表單隱藏字段。就是服務器會自動修改表單，添加一個隱藏字段，以便在表單提交時能夠把session id傳遞迴服務器。比如： 

<form name="testform" action="/xxx"> 

<input type="hidden" name="jsessionid" value="ByOK3vjFD75aPnrF7C2HmdnV6QZcEbzWoWiBYEnLerjQ99zWpBng!-145788764"> 
<input type="text"> 
</form> 

實際上這種技術可以簡單的用對action應用URL重寫來代替。

cookie 和session 的區別：

1>、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

2>、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
   考慮到安全應當使用session。

3>、session會在一定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能
   考慮到減輕服務器性能方面，應當使用COOKIE。

4>、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

5>、所以個人建議：
   將登陸信息等重要信息存放爲SESSION
   其他信息如果需要保留，可以放在COOKIE中

說了這麼多還沒有說到cookie的具體使用方法，別急，下面就是了：

添加cookie的方法：

function addCookie(name,value,expiresHours){ 
    var cookieString=name+"="+escape(value); 
    //判斷是否設置過期時間 
    if(expiresHours>0){ 
        var date=new Date(); 
        date.setTime(date.getTime+expiresHours*3600*1000); 
        cookieString=cookieString+"; expires="+date.toGMTString(); 
    } 
    document.cookie=cookieString; 
} 

獲取指定名稱的cookie值：getCookie(name) ：

function getCookie(name){ 
    var strCookie=document.cookie; 
    var arrCookie=strCookie.split("; "); 
    for(var i=0;i<arrCookie.length;i++){ 
        var arr=arrCookie[i].split("="); 
        if(arr[0]==name)return arr[1]; 
    } 
    return ""; 
} 

刪除指定名稱的cookie：deleteCookie(name) ：

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