前端培训-中级阶段(22）- localStorage / sessionStorage 本地存储（2019-10-24期）

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）。