优化实战第 23 期 - 浏览器WebStorage存储在优化中的应用Web Storage 是 HTML5 专门为浏

Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制。目的是为了解决本不应该 Cookie 做的事情，却不得不用 Cookie 的本地存储

存储缺点

存储的值只能是字符串，如果是非字符串，会默认调用对象的 toString() 转化为字符串后再存储

如果要存储数组或对象，需要使用 JSON.stringify() 序列化后存储，读取数据后再用 JSON.parse() 反序列化

存储特性

存储空间大

根据浏览器的不同，存储容量可以达到 5-10M 之间
不会造成网络负担

数据仅存储于浏览器端，不与服务器端发生通信

存储方式（localStorage）

生命周期

持久化的本地存储，存储的数据永远不会过期，即使页面或浏览器关闭也一直存在，除非手动删除
作用域

遵循 同源策略，存储的数据在同域下的所有页面是共享的

核心 API 示例

存储数据

localStorage.setItem('name', '老夫子')

读取数据

localStorage.getItem('name')

删除某一键名对应的数据

localStorage.removeItem('name')

清空数据记录

localStorage.clear()

存储方式（sessionStorage）

生命周期

临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放
作用域

遵循 同源策略，存储的数据在同域下的所有页面是相互独立的。即便是相同域名下的两个页面，只要它们 不在同一个浏览器窗口中 打开，那么它们的存储内容便无法共享

核心 API 示例

存储数据

sessionStorage.setItem('name', '老夫子')

读取数据

sessionStorage.getItem('name')

删除某一键名对应的数据

sessionStorage.removeItem('name')

清空数据记录

sessionStorage.clear()

存储的 Storage 事件

概览

通过更新 localStorage 的操作（增、删、改）来触发，在同一个浏览器下打开的所有同源页面都可以监听得到，当前触发修改的页面除外

事件监听

window.addEventListener('storage', event => {
  const { url, key, newValue, oldValue } = event
  console.log('发生改变的对象所在页面的URL地址', url)
  console.log('被修改的键名称', key)
  console.log('修改后的新值', newValue)
  console.log('修改之前的原值', oldValue)
})

当 localStorage 发生变化时，会触发 storage 事件。利用这个特性，可以通过把消息写入本地存储，然后在各个页面内监听触发事件来实现跨页面通信

本期总结

Web Storage 是对 Cookie 的拓展，弥补了 Cookie 的部分缺陷，但无法存储大规模的、结构复杂的数据

一起学习，加群交流看沸点

优化实战 第 23 期 - 浏览器WebStorage存储在优化中的应用