localStorage，sessionStorage和cookie的區別及使用

1、概述

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請求之間儲存資料。
sessionStorage、localStorage、cookie都是在瀏覽器端儲存的資料。

2、共同點

都是儲存在瀏覽器端，且同源的。

3、區別

1. 傳遞方式：
   cookie在瀏覽器和伺服器間來回傳遞；
   sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存；
2. 儲存大小：
   localStorage<=5M；
   sessionStorage<=5M；
   cookie<4K；（ie核心瀏覽器佔主流地位，且ie6仍佔有相當大的市場份額，所以在程式中應當使用少於20個cookie，且不大於4k）
3. 有效性：
   localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；
   sessionStorage：僅在當前瀏覽器視窗關閉前有效，不能持久保持；
   cookie：只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉也不會消失；
4. 共享機制：
   localStorage ：在所有同源視窗中都是共享的；
   sessionStorage：同時“獨立”開啟的不同視窗，即使是同一頁面，sessionStorage物件也是不同的；
   cookie：在所有同源視窗中都是共享的
5. 瀏覽器支援：
   sessionStorage的瀏覽器最小版本：IE8、Chrome 5。
6. 使用場景
   cookie：儲存回話資訊
   localStorage：持久儲存的資料
   sessionStorage：擁有獨立特性的資料

4、JS中使用

1. localStorage

localStorage.setItem("key","value");//儲存變數名為key，值為value的變數
localStorage.key = "value"//儲存變數名為key，值為value的變數

localStorage.getItem("key");//獲取儲存的變數key的值
localStorage.key;//獲取儲存的變數key的值

localStorage.removeItem("key")//刪除變數名為key的儲存變數

     2.sessionStorage

sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值
sessionStorage['testKey'] = '這是一個測試的value值';

essionStorage.getItem('testKey'); // => 返回testKey對應的值
sessionStorage['testKey']; // => 這是一個測試的value值

sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 物件中移除。
sessionStorage.clear() //清除 sessionStorage 物件所有的項。

sessionStorage.length //返回一個整數，表示儲存在 sessionStorage 物件中的資料項(鍵值對)數量。

      3.cookie

//寫cookies
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

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

//刪除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();
}

//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}