在web網頁開發中，常常會用到Cookie,localStorage,sessionStorage等方式臨時儲存客戶端資料，本文為大家解說這三種方式的區別，應用場景以及使用方法。

三者的異同

1. cookie

   cookie 是儲存於訪問者的計算機中的變數。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來建立和取回 cookie 的值。支援所有現代瀏覽器。

2. localStorage和sessionStorage

   localStorage和sessionStorage是HTML5新屬性，使用HTML5本地儲存可以在本地儲存使用者的瀏覽資料。

3.比較圖

應用場景

有了對上面這些差別的直觀理解，我們就可以討論三者的應用場景了。

因為考慮到每個 HTTP 請求都會帶著 Cookie 的資訊，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷使用者是否登入。針對登入過的使用者，伺服器端會在他登入時往 Cookie 中插入一段加密過的唯一辨識單一使用者的辨識碼，下次只要讀取這個值就可以判斷當前使用者是否登入啦。

localStorage 和sessionStorage的用法是一樣的，主要看你的資料儲存的時間相應選擇，可以儲存購物車的資訊，表單的資料儲存，當然也可以儲存其他資料。

使用方法

一.Cookie建立，讀取，刪除

1.建立一個 cookie(cname,鍵名；cvalue,值；exdays,儲存時間)

function setCookie(cname,cvalue,exdays){

var d = new Date();

d.setTime(d.getTime()+(exdays*24*60*60*1000));

var expires = "expires="+d.toGMTString();

document.cookie = cname+"="+cvalue+"; "+expires;

}

(2)讀取cookie

function getCookie(cname){

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++) {

var c = ca[i].trim();

if (c.indexOf(name)==0) return c.substring(name.length,c.length);

}

return "";

}

(3)刪除cookie

function delCookie(name)

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval=getCookie(name);

if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

二.localStorage和sessionStorage的使用相對簡單

讀取和建立(name:鍵名；value:鍵名對相應的值)，只能儲存字元型別；

建立

localStorage.setITem("name"，value);

sessionStorage.setITem("name"，value);

讀取

var a=localStorage.getItem("name");

var b=sessionStorage.getItem("name");