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