跳到主要内容

浏览器存储机制

常见存储能力对比​

适合：

  • 登录态相关的小体积信息
  • 需要随请求自动带给服务端的数据

注意：

  • 体积小
  • 会参与请求发送
  • 需要关注 HttpOnly、Secure、SameSite

localStorage / sessionStorage​

适合：

  • 轻量配置
  • 草稿、偏好设置
  • 不需要复杂查询的简单数据

区别：

  • localStorage：长期保存
  • sessionStorage：会话级别保存

补充：

  • 如果你还需要把变更即时同步到其他标签页，通常会结合 storage 事件，或者直接使用更适合做广播的 BroadcastChannel

IndexedDB​

适合：

  • 大体积结构化数据
  • 离线数据缓存
  • 本地搜索、草稿系统、同步队列

Cache Storage​

适合：

  • 配合 Service Worker 缓存静态资源和请求响应
  • 做离线页面或弱网兜底

选型建议​

  • 只存一两个开关：localStorage
  • 需要登录态参与请求：Cookie
  • 需要结构化离线数据：IndexedDB
  • 需要资源缓存与离线访问：Cache Storage + Service Worker