localStorage

實際開發中，localStorage用的還是挺多的。
比如，網頁中有個手風琴列表，列表中有“資源管理”、“域管理”、“設備管理”等多個入口，默認進入“資源管理”功能頁面。
不同的用戶關注點不同，有的可能需要進入“域管理”頁面，有的則只關注“設備管理”。這時，使用localStorage保存用戶上一次最后停留的功能頁面對應的id，如此一來，用戶下一次進入該網頁時，直接顯示的就是他們關注的功能頁面，而不需要到手風琴列表上去切換入口。
用localStorage來記錄用戶習慣，可以改善用戶體驗。

再比如，后臺表格數據的更新周期是5min，前臺下發請求獲取表格數據的周期肯定比5min小，比如3min，甚至更短。
如果前臺一獲得后臺數據，就用它們去更新表格內容，很有可能降低網頁性能甚至出現頁面假死。對此，用localStorage記錄上一次更新表格時的數據。每次更新表格數據前，都會將本次獲得的后臺數據與上一次更新表格時的數據做對比，只在二者有差異時，才會用這份新數據去重新填充表格。這個思想和現在React、Vue框架里的虛擬DOM差不多，不過我們那會兒是基于js原型鏈開發。

localStorage存儲的數據可以長期保留，除非手動清除。
localStorage中的鍵值對是以字符串的形式存儲，所以會用到JSON.stringify()|JSON.parse()。

• localStorage.setItem(key,value)
• localStorage.getItem(key)
• localStorage.removeItem(key)
• localStorage.clear()
  

sessionStorage

sessionStorage，工作中我沒怎么用過。
不過它和localStorage差不多，但它不像localStorage長期有效，只要頁面關閉，sessionStorage中保存的數據就會被清除。

• sessionStorage.setItem(key,value)
• sessionStorage.getItem(key)
• sessionStorage.removeItem(key)
• sessionStorage.clear()
  

總結

以上是生活随笔為你收集整理的浏览器本地缓存：localStorage与sessionStorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。