cookie、sessionStorage、localStorage

以前只知道cookie、sessionStorage、localStorage的一些存儲量，過時時間上的區別，今天仔細研究了一下它們用法上的區別。

cookie

cookie的本質是在綁定的特定的域名下的。當服務器發送的HTTP響應頭中包含cookie會話信息時（{key,value}形式），瀏覽器會保存這樣的會話信息，並在再次給建立它的域名發送請求時，都會包含這個cookie。這個限制確保了儲存在cookie中的信息只能讓批准的接受者訪問，而沒法被其餘域訪問。

JavaScript中的cookie

在JavaScript中操做cookie有點複雜，由於只有BOM的document.cookie屬性，返回頁面可用的全部cookie的字符串，一系列有逗號分隔開的鍵值對。
document.cookie屬性能夠設置新的cookie字符串，並不會覆蓋cookie，除非cookie的名稱已經存在。

cookie中全部的名字和值都是通過URL編碼的，因此必須使用decodeURIComponent()來解碼。

因爲JavaScript中讀寫cookie不夠直觀，因此須要封裝一些方法來方便cookie的操做。例如：讀、寫、刪除操做。

設置cookie:

function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
}

讀取cookie

function getCookie(name) 
{ 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 
　　 return (arr=document.cookie.match(reg))?unescape(arr[2]):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();

}

這樣封裝起來就很方便使用啦！

sessionStorage和localStorage

sessionStorage和localStorage都是在HTML5中提出的，都是以window對象屬性的形式存在，用來在客戶端存儲會話數據。
sessionStorage和localStorage都是Storage類型的實例。因此它們有clear()、getItem(name)、key(index)、removeItem（name）、setItem(name，value)方法。

sessionStorage對象存儲特定於某個會話的數據，也就是該數據只保存到瀏覽器關閉。localStorage屬於永久性存儲。切它們的存儲量也大於cookie，因瀏覽器而已，基本能夠達到有5M。

sessionStorage和localStorage只能存儲字符串類型數據，沒法直接存儲數組類型和JSON對象，若是有需求該怎樣作呢？其實也很簡單。首先將JSON對象經過JSON.stringify()方法轉換成字符串，再存儲到sessionstorage中，而後經過JSON.parse()方法將字符串轉換成JSON格式便可。