前端培訓-中級階段(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) 通過 設置對應數據項的 。也可以通過 = 號賦值。
    image.png
  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

clipboard.png

參考文獻

  1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章