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