Web Storage

Web Storage 是浏览器提供的本地键值存储能力，主要分为：

• localStorage
• sessionStorage

它们都适合保存前端本地状态，但都不会像 Cookie 一样自动随请求发送。

Web Storage 适合什么

常见场景：

• 本地偏好设置
• 草稿内容
• 临时缓存
• 页面状态恢复

如果数据量较大、结构复杂，或者需要查询能力，通常要继续看 IndexedDB。

两者的共同点

localStorage 和 sessionStorage API 基本一致：

storage.setItem(key, value)
storage.getItem(key)
storage.removeItem(key)
storage.clear()
storage.key(index)
storage.length

还要注意三点：

• 只能直接存字符串
• 同源下才可访问
• API 是同步的

为什么说“只能存字符串”

localStorage.setItem('theme', 'dark')

如果要存对象，通常要自己做序列化：

localStorage.setItem('prefs', JSON.stringify({ theme: 'dark' }))

const prefs = JSON.parse(localStorage.getItem('prefs') || '{}')

localStorage

localStorage 更偏“持久化本地存储”。

它的特点是：

• 关闭标签页后通常还在
• 同源下多个标签页可共享
• 适合保存长期配置

localStorage.setItem('theme', 'dark')
console.log(localStorage.getItem('theme'))

sessionStorage

sessionStorage 更偏“当前标签页会话内存储”。

它的特点是：

• 关闭当前标签页后通常就失效
• 不会像 localStorage 那样天然跨标签共享
• 适合保存当前会话草稿或中间状态

sessionStorage.setItem('draft', 'hello')
console.log(sessionStorage.getItem('draft'))

两者最核心的区别

可以先简单记成：

• localStorage：跨页面刷新、跨同源标签更稳定
• sessionStorage：更贴近当前标签页会话

storage 事件

当其他同源页面修改了存储时，可以监听 storage 事件：

window.addEventListener('storage', (event) => {
  console.log(event.key, event.oldValue, event.newValue)
})

这个能力常用于：

• 多标签同步登录态展示
• 多页面同步主题配置

一个容易忽略的点是：

• 触发修改的当前页面，通常不会收到自己这次修改触发的 storage 事件

使用时要注意什么

容量有限

浏览器一般会给出几 MB 级别的配额，但不同浏览器实现有差异，超限时会抛出异常。

同步 API

它不是异步数据库，频繁读写大对象会阻塞主线程。

不适合存敏感信息

Web Storage 可以被前端脚本直接访问，因此不适合存放高敏感认证信息。

和 Cookie 的区别

最容易混淆的是：

• Cookie 会参与请求
• Web Storage 只是前端本地存储

如果目标是登录态自动跟随请求，通常不会优先靠 Web Storage 本身解决。

使用建议

• 持久偏好配置优先用 localStorage。
• 当前标签页草稿或中间状态优先用 sessionStorage。
• 复杂对象记得 JSON.stringify / JSON.parse。
• 不要把它当成大容量数据库，也不要直接存高敏感信息。