localStorage和sessionStorage

這兩個是HTML5新增加的，經常用到，在這里記錄一下。

這兩個都是存儲在客戶端的，以鍵值對的形式存儲。

兩個的共同點都是存儲在客戶端也就是瀏覽器，存儲的數據大小是5M。比cookie的4K大了很多。

兩個的不同點是存儲的時間不一樣。

localStorage的生命周期可以說是永久，除了主動清除以外，是一直在客戶端保存的。

sessionStorage的生命周期和當前頁面有關，關閉當前頁面或者是關閉瀏覽器，數據就被清除掉。

具體使用哪一個，看實際項目需求。

說一下具體用法。

兩個的用法可以說一樣，具體就是保存到本地、從本地取出來、刪除存儲的數據、清除全部。

具體看下面代碼：

//localStorage的用法
//保存到本地,第一個參數是變量名，第二個是值
 3 localStorage.setItem('name','張三');
//從本地取出，只有一個參數，存儲的變量名
localStorage.getItem('name');
//刪除某一個存儲的數據
localStorage.removeItem('name');
//清除所有的數據
localStorage.clear();

//sessionStorage的用法，參考localStorage的用法
sessionStorage.setItem('name','李四');
sessionStorage.getItem('name');
sessionStorage.removeItem('name');
sessionStorage.clear();

第一次使用這個的可能會問怎么知道數據有沒有存儲到客戶端，很簡單，就像我們查看元素一樣，localStorage和sessionStorage也可以在瀏覽器控制台查看，首先運行以下代碼：

//保存到本地
localStorage.setItem('name','張三');

sessionStorage.setItem('name','李四');
            

然后就可以看到下圖：

可以看到我們想要保存的數據已經存儲到了本地。 

上面只是簡單的存儲，在實際項目中可能會出現需要存儲數組或者是對象，這樣的情況下就不能像上面那樣簡單的存儲，需要轉換一下格式。

因為localStorage和sessionStorage是以字符串格式存儲到本地的。

對於需要存儲數組或者是對象，我們可以轉換一下格式，如下代碼：

//保存
setSession(key,value){
    localStorage.setItem(key,JSON.stringify(value))
};
//取出
getSession(key){
    return JSON.parse(localStorage.getItem(key))
};

上面是localStorage用法，sessionStorage同理。

刪除和清除全部還是上面代碼。

完。