前端存储方案

发表于 更新于 本文字数： 827 阅读时长 ≈ 1 分钟
本文介绍关于前端存储方案，包括使用场景、实现细节等，以提高关于前端存储方案的效率。

WEB项目因为HTTP无状态，前端性能，SPA应用页面跳转数据共享等原因需要考虑前端存储方案，各个方案都有其特点，清楚才能合理选择及使用，这里总结下。

存储方案

  • cookie
  • sessionStorage
  • localStorage
  • indexedDB

Web SQL

在Chrome浏览器开发工具中还会看到Web SQL，但并不是HTML5规范的一部分，且Firefox不支持，因此不推荐使用。

方案区别

针对以上几个方案，这里从各个维度来列出下区别。

存储大小

  • cookie为4kb
  • sessionStorage为2.5-10MB，因浏览器而异
  • localStorage为2.5-10MB，因浏览器而异
  • indexedDB 为> 250MB，因浏览器而异

失效时间

  • 设定过期时间的cookie到期自动清除
  • sessionStorage浏览器关闭清除
    • 注意不同Tab，不同Window session不同，但假如浏览器直接操作A页面复制的A页面，会发现sessionStorage默认值会是之前页面，但依然是独立的会话存储。
  • localStorage永久保存
  • indexedDB永久保存

与服务端交互

  • cookie有交互，sessionStorage，localStorage，indexedDB没有
    • cookie会在每个请求【除了跨域异步请求】中携带，因此不要让cookie数据变的很重，进而造成请求数据包过大

同步异步

  • indexedDB操作为异步，cookie，sessionStorage，localStorage均为同步

访问策略

  • cookie，sessionStorage，indexedDB，localStorage符合同源策略可以访问。
  • cookie可以通过设定domain做到不同源共享cookie

适用场景

  • cookie：登陆令牌等，短期存储
  • sessionStorage：短期存储，但请求时不需要与后端通讯，且大小有要求
  • localStorage：长期存储
  • indexedDB：大量结构化数据，长期存储