linong
  • 16.6k

前端培训-中级阶段(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. 前端培训目录、前端培训规划、前端培训计划
阅读 758

推荐阅读
javascript-lNong
用户专栏

只此一生,何必从众

997 人关注
124 篇文章
专栏主页