Web Storage

简介

Web Storage标准: https://www.w3.org/TR/webstorage/
这里主要从localStorage角度去描述。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。

应注意,无论数据存储在 localStorage 还是 sessionStorage ,它们都特定于页面的协议。

另外,localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

使用场景

  • 需要持久化一定数据的时候
  • 需要跨页面处理数据的时候

API

localStorage的API比较简单,只有增删查,改则是通新增覆盖原有的key,这里不做赘述,直接看文档。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

storage事件

当前页面使用的storage被其他页面修改时会触发StorageEvent事件

这里在理解概念时着重注意的是,“当前页面使用”,“其他页面修改”,“才会触发当前页面的StorageEvent”。
言外之意是,当前页面使用当前页面修改不会触发当前页面的StorageEvent。
事件返回的event对象详情看文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/StorageEvent

跨页面也是依赖该事件

存储大小

LocalStorage 在大部分浏览器的存储大小为5MB
如果不确定可以通过工具(或者自己写代码)去探测
https://web.dev/storage-for-the-web/

兼容性