摘要：快速上手先說區別數據大小不能超過。可以在后端設置修改，數據僅在本地瀏覽器保存。數據存儲在瀏覽器僅在瀏覽器為關閉的狀態，關閉窗口后數據就會銷毀。默認情況下，屬于當前頁面。

cookie:

數據大小不能超過4KB。

不管是否有需求，cookie數據都會在HTTP請求中攜帶，在瀏覽器和服務器中來回傳遞，占用資源。

可以在后端設置修改，數據僅在本地瀏覽器保存。

cookie數據可以設置路徑，限制cookie只屬于某個路徑下。

默認數據失效是關閉瀏覽器，也可以設置失效時間

sessionStorage：

數據大小5M或者更大。

不會和跟隨HTTP請求，所以不會占用資源。

數據存儲在瀏覽器僅在瀏覽器為關閉的狀態，關閉窗口后數據就會銷毀。可以講是“臨時存儲”

sessionStorage在不同瀏覽器窗口下不會共享數據，即使打開同一個頁面。

localStorage ：

數據大小5M或者更大。

不會和跟隨HTTP請求，所以不會占用資源。

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

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

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

Cookie 以名/值對形式存儲
例如username=John Doe，這里的數據是string類型，如要是其他格式注意進行格式轉換。

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

function setCookie(cname,cvalue,exdays)
{
  var SetTime = new Date();                                         //設置過期時間
  SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));        //設置過期時間
  var expires = "expires="+SetTime.toGMTString();                   //設置過期時間
  document.cookie = cname + "=" + cvalue + "; " + expires;          //創建一個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的有效時間改成昨天。

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

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

添加/修改cookie并設定過期時間：

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

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對于web storage的支持很友好，使用方法很簡單

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


----------


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


----------


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

基本和sessionStorage一樣；

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


----------


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


----------


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

            sessionStorage.clear();   //清除所有sessionStorage數據
            localStorage.clear()      //清除所有localStorage數據