cookie、Sessionstorage、Localstorage快速上手

cookie、Sessionstorage、Localstorage快速上手

先說區別

cookie:

1. 數據大小不能超過4KB。

2. 無論是否有需求，cookie數據都會在HTTP請求中攜帶，在瀏覽器和服務器中來回傳遞，佔用資源。

3. 能夠在後端設置修改，數據僅在本地瀏覽器保存。

4. cookie數據能夠設置路徑，限制cookie只屬於某個路徑下。

5. 默認數據失效是關閉瀏覽器，也能夠設置失效時間

---

sessionStorage：

1. 數據大小5M或者更大。

2. 不會和跟隨HTTP請求，因此不會佔用資源。

3. 數據存儲在瀏覽器僅在瀏覽器爲關閉的狀態，關閉窗口後數據就會銷燬。能夠講是「臨時存儲」

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

---

localStorage ：

1. 數據大小5M或者更大。

2. 不會和跟隨HTTP請求，因此不會佔用資源。

3. 數據保存在本地硬件設備（一般指硬盤，也能夠是其餘），須要用戶主動刪除，不然就是永久保存 。不一樣瀏覽器之間不會共享數據。

---

cookie使用方法

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=/";

設置cookie

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
}

讀取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

將cookie的有效時間改爲昨天。

cookies.js

注意這裏用的是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');

---

SessionStorage 用法

H5對於web storage的支持很友好，使用方法很簡單

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


----------


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


----------


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

---

localStorage用法

基本和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數據