摘要：快速上手先說區(qū)別數(shù)據(jù)大小不能超過。可以在后端設(shè)置修改，數(shù)據(jù)僅在本地瀏覽器保存。數(shù)據(jù)存儲(chǔ)在瀏覽器僅在瀏覽器為關(guān)閉的狀態(tài)，關(guān)閉窗口后數(shù)據(jù)就會(huì)銷毀。默認(rèn)情況下，屬于當(dāng)前頁面。

cookie:

數(shù)據(jù)大小不能超過4KB。

不管是否有需求，cookie數(shù)據(jù)都會(huì)在HTTP請(qǐng)求中攜帶，在瀏覽器和服務(wù)器中來回傳遞，占用資源。

可以在后端設(shè)置修改，數(shù)據(jù)僅在本地瀏覽器保存。

cookie數(shù)據(jù)可以設(shè)置路徑，限制cookie只屬于某個(gè)路徑下。

默認(rèn)數(shù)據(jù)失效是關(guān)閉瀏覽器，也可以設(shè)置失效時(shí)間

sessionStorage：

數(shù)據(jù)大小5M或者更大。

不會(huì)和跟隨HTTP請(qǐng)求，所以不會(huì)占用資源。

數(shù)據(jù)存儲(chǔ)在瀏覽器僅在瀏覽器為關(guān)閉的狀態(tài)，關(guān)閉窗口后數(shù)據(jù)就會(huì)銷毀。可以講是“臨時(shí)存儲(chǔ)”

sessionStorage在不同瀏覽器窗口下不會(huì)共享數(shù)據(jù)，即使打開同一個(gè)頁面。

localStorage ：

數(shù)據(jù)大小5M或者更大。

不會(huì)和跟隨HTTP請(qǐng)求，所以不會(huì)占用資源。

數(shù)據(jù)保存在本地硬件設(shè)備（通常指硬盤，也可以是其他），需要用戶主動(dòng)刪除，否則就是永久保存 。不同瀏覽器之間不會(huì)共享數(shù)據(jù)。

cookie可以寫好封裝，也可直接用已經(jīng)寫好的框架這里推薦一個(gè)吧‘jquery.cookies.2.2.0.min.js’；注意還有有一個(gè)是cookie.js的也可以，個(gè)人覺得沒有“jquery.cookies.2.2.0.min.js”好用。

先說一下，JavaScript原生的用法。

Cookie 以名/值對(duì)形式存儲(chǔ)
例如username=John Doe，這里的數(shù)據(jù)是string類型，如要是其他格式注意進(jìn)行格式轉(zhuǎn)換。

JavaScript 可以使用 document.cookie 屬性來創(chuàng)建 、讀取、及刪除 cookie。
JavaScript 中，創(chuàng)建 cookie 如下所示：
document.cookie="username=John Doe";
您還可以為 cookie 添加一個(gè)過期時(shí)間（以 UTC 或 GMT 時(shí)間）。默認(rèn)情況下，cookie 在瀏覽器關(guān)閉時(shí)刪除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑。默認(rèn)情況下，cookie 屬于當(dāng)前頁面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

function setCookie(cname,cvalue,exdays)
{
  var SetTime = new Date();                                         //設(shè)置過期時(shí)間
  SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));        //設(shè)置過期時(shí)間
  var expires = "expires="+SetTime.toGMTString();                   //設(shè)置過期時(shí)間
  document.cookie = cname + "=" + cvalue + "; " + expires;          //創(chuàng)建一個(gè)cookie
}

function getCookie(c_name)
{
if (document.cookie.length>0) 
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

將cookie的有效時(shí)間改成昨天。

注意這里用的是cookies.js
注意這里用的是cookies.js
不是cookie.js
它們是兩個(gè)不同的插件，容易搞混

如果覺得上面的方法有點(diǎn)麻煩，就用別人已經(jīng)封裝好的插件吧，“jquery.cookies.2.2.0.min.js”

添加/修改cookie并設(shè)定過期時(shí)間：

`$.cookies.set("cookie_id", "cookie_value", { hoursToLive: 10 });
這里設(shè)置的是過期時(shí)間是10小時(shí)
還可以這樣設(shè)置過期時(shí)間：

expireDate = new Date();

expireDate.setTime( expireDate.getTime() + ( 10 * 60 * 60 * 1000 ) );

$.cookies.set("cookie_id", "cookie_value", {expiresAt:expireDate});

獲取cookie

$.cookies.get("cookie_id");

刪除cookie

$.cookies.del("cookie_id");

H5對(duì)于web storage的支持很友好，使用方法很簡單

sessionStorage.getItem(keyName);          //獲取指定key的本地存儲(chǔ)的值
//或者
var keyName=sessionStorage.key;

sessionStorage.setItem(keyName,value);   // 將value存儲(chǔ)到key字段中
//或者
sessionStorage.keyName="value";

sessionStorage.removeItem(keyName);     // 刪除指定ke的本地存儲(chǔ)的值
sessionStorage.clear();                 //清除所有的key ,value,慎用，慎用，慎用，會(huì)清除所有，會(huì)把別的網(wǎng)頁的存儲(chǔ)也刪除

基本和sessionStorage一樣；

localStorage.getItem(keyName);          //獲取指定key的本地存儲(chǔ)的值
//或者
var keyName=sessionStorage.key;

localStorage.setItem(keyName,value);   // 將value存儲(chǔ)到key字段中
//或者
localStorage.keyName="value";

localStorage.removeItem(keyName);     // 刪除指定ke的本地存儲(chǔ)的值

localStorage.clear();                //清除所有的key ,value,慎用，慎用，慎用，會(huì)清除所有，會(huì)把別的網(wǎng)頁的存儲(chǔ)也刪除