關於HTML5中的sessionStorage和localStorage

需求：

  　　作項目的時大多數狀況下咱們須要對請求的數據進行屢次複用，爲了下降請求次數咱們須要對請求的數據進行本地存儲；

   之前用的cooking來存儲爲本地數據，HTML5後提出sessioStorage、localStorage，那麼咱們來看看三者的區別（大體瞭解下，不是本博文重點）。

cooking

Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

   

SessionStorage：

將數據保存在session對象中，所謂session是指用戶在瀏覽某個網站時，從進入網站到 瀏覽器關閉所通過的這段時間會話，也就是用戶瀏覽這個網站所花費的時間就是session的生命週期。session對象能夠用來保存在這段時間內所要求保存的任何數據。

此對象主要有兩個方法（還有其餘方法，自行選擇）：

保存數據：sessionStorage.setItem(Key, value);

讀取數據：sessionStorage.getItem(Key);

Key：表示你要存入的鍵名稱，此名稱能夠隨便命名，能夠按照變量的意思來理解。

Value：表示值，也就是你要存入Key中的值，能夠按照變量賦值來理解。

使用方法：

保存數據：sessionStorage.setItem("website", "W3Cfuns.com");

讀取數據：sessionStorage.getItem("website");

S

localStorage：

   將數據存儲在本地，會一直存在，除非用戶主動刪除（具體操做看官網），否則不會消失。

  用法和sessionStorage同樣。

 

存儲在本地時發現個問題，sessionStorage只能存儲字符串，不能直接存儲數組和對象。

例子：

var obj={
        'name':'joke',
        'age':25,
        'weight':'55kg'
            }
  sessionStorage.data=obj;
  console.log(ssessionStorage.data);

看控制檯：

 

能夠很明顯的看到輸出的字符串，不是咱們想要的object。

因此就查資料啊。

發現了JSON。

那麼咱們這樣設置:

var obj={
            'name':'joke',
            'age':25,
            'weight':'55kg'
            }
  var str=JSON.stringify(obj);
  sessionStorage.data=str;
  datas=JSON.parse(sessionStorage.data);
console.log(datas);
console.log(typeof datas)   

再來看控制檯：

 

  哈哈  就是咱們想要的object了。

步驟：

　　先以字符串形式存入本地存儲：stringify

　　而後以對象形式取出數據：parse

   實例：