前端存储总结

,

前言

以前做 Android 的时候，总会缓存首屏数据使体验更佳，但是现在前端存储技术多样，都有什么区别，应用场景都在哪呢？

cookie 的诞生就是为了用户校验而存在的，简单来讲就是区别不同用户而存在的，因为 http 协议是无状态的，网页本身并不知道你是谁，所以需要 cookie。

属性

cookie 是通过 key-value 的形式存储，通过 document.cookie 可以查看。
每个 cookie 都有他自身的属性，其中包括

  • Expires/Max-Age
    设置 cookie 什么时间内有效，其中Expires是 http/1.0 的选项，之后由Max-Age替代；Expires是具体时间点，Max-Age是秒为单位的时间段，默认是关闭客户端失效。
  • Domain，Path
    Domain和Path决定了 cookie 会在什么 url 带上请求
  • Secure
    Secure是设置 cookie 确保在安全的请求才发送，如 https 就会带上
  • HttpOnly
    只要设置了这个选项，那么客户端内的 JavaScript 是不能访问这个 cookie，只会通过请求的时候带上，主要是为了避免 XSS 攻击获取到。
  • Size
    cookie 大小

使用

cookie 可分为两种，

  • 服务端是通过响应头（set-cookie）返回给客户端，浏览器会保存下来，并且下次请求会带上
  • 前端可用 api 手动设置

缺点

  • 不同的浏览器 cookie 数量有限，如 IE6 含以下版本 20 个，以上版本 50 个，火狐浏览器也是 50 个，Opera 30 个，Chrome 和 Safari 没有限制；
    当超出限制了之后，再设置会清除以前的 cookie，IE 和 Opera 会清理近期最少使用的 cookie，FF 会随机清理 cookie
  • 存储量太小，最多只有 4kb
  • 每次 http 都会发送到服务端，影响资源获取效率
  • 客户端 api 太过繁琐，需要自己封装

骚操作

突破 4kb 限制可以通过 iframe 共享 cookie 的方法，具体做法是子客户端改写window.location写上 cookie

localStorage 和 sessionStorage

这两个是 HTML5 专门设计的存储方案，两者区别只有 sessionStorage 是会话级别，关闭客户端即清空；还有一点就是他不能共享，而 localStorage 是永久存储。
大小因浏览器而定，都是 5M ～ 10M 左右。

使用

只有客户端可以操作，使用方法简单的setItem，getItem，removeItem和clear。

坑点

Hybrid 应用开发的时候，需要注意 sessionStorage 在页面跳转的时候没有像浏览器一样延伸，而是一个新的页面，所以 sessionStorage 也是新的。

其他

以上存储都只能存字符串，对于结构化和检索来讲不太友好，所以存储还有indexedDB和WebSQL，但是使用比较少，一个比较像NoSQL数据库，而WebSQL就像关系型数据库了，通过 SQL 来操作，W3C 的 WebDatabase 规范中说这份规范不再维护了，所以如果有大型离线需求，优先考虑indexedDB。

总结

综上所述基本上可以判断

  • cookie 是存储简单用来校验的数据
  • 而 localStorage 可以存储一些业务数据，例如 SPA 首屏数据缓存，在 SPA 甚至可以代替 cookie 存在，自己维护
  • sessionStorage 可以进行一些数据传递，比如表单之间页面数据
  • indexedDB 和 WebSQL 是构建离线数据库，复杂页面可以使用

写客户端都是有一个想法，前端总是危险的，为了避免 XSS 攻击，存储的时候需要多思考。

推荐