前端存储方案

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浏览器关闭清除
  • localStorage永久保存
  • indexedDB永久保存

与服务端交互

  • cookie有交互,sessionStorage,localStorage,indexedDB没有
    • cookie会在每个请求中携带,因此不要让cookie数据变的很重,进而造成请求数据包过大

同步异步

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

访问策略

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

适用场景

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