前端培訓-中級階段（22）-localStorage/sessionStorage本地存儲（2019-10-24期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

Storage

Storage 提供了訪問特定域名下的會話級別或永久級別的存儲功能，例如，能夠添加、修改或刪除存儲的數據項。

鍵值對是以字符串的形式存儲。且是同步的方式存儲，因此長字符串頻繁讀取會形成卡頓。

Storage 屬性

1. Storage.length 返回一個整數，表示存儲的數量項個數。

Storage 方法

1. Storage.key(idx) 經過 idx 返回對應數據項的鍵。順序規則不是增長順序。
2. Storage.getItem(key) 經過 鍵 返回對應數據項的 值。也能夠經過localStorage[key]或者localStorage.key來獲取值。
3. Storage.setItem(key, value) 經過 鍵 設置對應數據項的 值。也能夠經過 = 號賦值。
   
4. Storage.removeItem(key) 經過 鍵 移除對應數據項。
5. Storage.clear() 清空存儲中全部內容

localStorage

永久級別的本地存儲。

Window.localStorage，各個窗口均可以共享使用，若是其餘窗口修改以後，會觸發 storage 通知事件。

sessionStorage

會話級別的本地存儲。

Window.sessionStorage，在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持。新窗口或者新頁面不會共享。

注意事項

1. 各瀏覽器支持的 localStorage 和 sessionStorage 容量上限不一樣。
2. localStorage 有可能會在空間不足被清理、或者用戶主動清理。
3. 由於是同步操做，因此會有卡頓問題。

localForage

localForage 是一個 JavaScript 庫，經過簡單相似 localStorage API 的異步存儲來改進你的 Web 應用程序的離線體驗。它能存儲多種類型的數據，而不單單是字符串。

localForage 有一個優雅降級策略，若瀏覽器不支持 IndexedDB 或 WebSQL，則使用 localStorage。在全部主流瀏覽器中均可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃