LocalStorage、SessionStorage

window.sessionStorage和window.localStorage接口用於腳本在瀏覽器保存數據。

LocalStorage

基本使用

設置

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

獲取

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

清除

localStorage.removeItem('key');
window.localStorage.clear()

完整用法

注意點

1. localStorage是html5技術提供的API，html5中新增長的標籤,技術(包括promise,localStorage等),統稱爲html5
2. session是服務器上存的hash，但localStorage實質也是一個hash，只不過是瀏覽器上的hash
3. localStorage只能存String類型的字符串
   

   

   
   存函數會轉化成字符串。存對象的時候會變成"[object Object]"，由於({1:'xxx'}).toString()//"[object Object]"
   

4. 解決方法：用json來存。例如：localStorage.setItem('jsonString', JSON.stringify({name: 'mtt'}))

   

使用注意

localStorage裏的數據和js變量有什麼區別？

當一個js變量被重新賦值，變量的值立即被改變，但當頁面刷新時，變量又回到最初的狀態。
而localStorage的變量不存在頁面裏，windows系統存在客戶端本地的C盤的一個文件裏。

簡單的使用實例

想要只提示用戶一次，當下次用戶進入這個網站上的時候，不跳出提示框。

<script>
 let already  = localStrorage.getItem('已經提示了')
 if(!already){
    alert('你好，咱們的網站即將改版了')
    localStorage.setItem('已經提示了'， true)
 }
</script>

總結

1. LocalStorage 跟 HTTP 無關(而cookie是http的一個頭)
2. 發送HTTP請求時 不會帶上 LocalStorage 的值
3. 只有相同域名的頁面才能互相讀取 LocalStorage（沒有同源那麼嚴格）
4. 每一個域名 localStorage 最大存儲量爲 5Mb 左右（每一個瀏覽器不同）
5. 經常使用場景：記錄有沒有提示過用戶（沒有用的信息，不能記錄密碼）
6. LocalStorage 永久有效，除非用戶主動清理緩存

SessionStorage

sessionStorage保存的數據用於瀏覽器的一次會話（session），當會話結束（一般是窗口關閉），數據被清空；localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取之前保存的數據。除了保存期限的長短不一樣，這兩個對象的其餘方面都一致。

總結：SessionStorage 在用戶關閉頁面（會話結束）後就失效。其他的和localstorage同樣