localStorage

實(shí)際開(kāi)發(fā)中，localStorage用的還是挺多的。
比如，網(wǎng)頁(yè)中有個(gè)手風(fēng)琴列表，列表中有“資源管理”、“域管理”、“設(shè)備管理”等多個(gè)入口，默認(rèn)進(jìn)入“資源管理”功能頁(yè)面。
不同的用戶關(guān)注點(diǎn)不同，有的可能需要進(jìn)入“域管理”頁(yè)面，有的則只關(guān)注“設(shè)備管理”。這時(shí)，使用localStorage保存用戶上一次最后停留的功能頁(yè)面對(duì)應(yīng)的id，如此一來(lái)，用戶下一次進(jìn)入該網(wǎng)頁(yè)時(shí)，直接顯示的就是他們關(guān)注的功能頁(yè)面，而不需要到手風(fēng)琴列表上去切換入口。
用localStorage來(lái)記錄用戶習(xí)慣，可以改善用戶體驗(yàn)。

再比如，后臺(tái)表格數(shù)據(jù)的更新周期是5min，前臺(tái)下發(fā)請(qǐng)求獲取表格數(shù)據(jù)的周期肯定比5min小，比如3min，甚至更短。
如果前臺(tái)一獲得后臺(tái)數(shù)據(jù)，就用它們?nèi)ジ卤砀駜?nèi)容，很有可能降低網(wǎng)頁(yè)性能甚至出現(xiàn)頁(yè)面假死。對(duì)此，用localStorage記錄上一次更新表格時(shí)的數(shù)據(jù)。每次更新表格數(shù)據(jù)前，都會(huì)將本次獲得的后臺(tái)數(shù)據(jù)與上一次更新表格時(shí)的數(shù)據(jù)做對(duì)比，只在二者有差異時(shí)，才會(huì)用這份新數(shù)據(jù)去重新填充表格。這個(gè)思想和現(xiàn)在React、Vue框架里的虛擬DOM差不多，不過(guò)我們那會(huì)兒是基于js原型鏈開(kāi)發(fā)。

localStorage存儲(chǔ)的數(shù)據(jù)可以長(zhǎng)期保留，除非手動(dòng)清除。
localStorage中的鍵值對(duì)是以字符串的形式存儲(chǔ)，所以會(huì)用到JSON.stringify()|JSON.parse()。

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

sessionStorage

sessionStorage，工作中我沒(méi)怎么用過(guò)。
不過(guò)它和localStorage差不多，但它不像localStorage長(zhǎng)期有效，只要頁(yè)面關(guān)閉，sessionStorage中保存的數(shù)據(jù)就會(huì)被清除。

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。