前端存储总结

前言

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

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

属性

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

  • Expires/Max-Age
    设置 cookie 什么时间内有效,其中Expires是 http/1.0 的选项,之后由Max-Age替代;Expires是具体时间点,Max-Age是秒为单位的时间段,默认是关闭客户端失效。
  • DomainPath
    DomainPath决定了 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 左右。

使用

只有客户端可以操作,使用方法简单的setItemgetItemremoveItemclear

坑点

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

其他

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

总结

综上所述基本上可以判断

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

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