前端存储数据的方式有：Cookies、SessionStorage、LocalStorage、IndexedDB
这些存储方式都受同源策略的约束，跨域是不能访问的

Cookies

Cookies并不是为了在浏览器中保存数据，而是为了保存HTTP状态，因为HTTP协议是没有状态的。例如保存用户登录的状态。

服务器可以设置和读取Cookies中的信息，服务器可以通过HTTP协议规定的set-cookie在浏览器里保存cookies，之后每次HTTP请求，浏览器都会为请求自动带上Cookies信息。

也可以通过JS代码手动读取和设置Cookies信息: document.cookie

Cookies包含哪些属性

  • Name：键值对名字
  • Value：键值对的值
  • Domain：Cookies是同源策略，这是当前Cookies生效的域名
  • Path：表示Cookies影响的路径，匹配到这个路径才会发送这个Cookies
  • Expires/Max-Age：
    • Expires告诉浏览器Cookies什么时候过期，是一个绝对时间；
    • Max-Age告诉浏览器多久后过期，一个相对时间；
    • 不设置的话，默认用户关闭浏览器就被清除，关闭tab不清楚
  • Size：表示当前保存值的大小
  • HttpOnly：当这个值为True的时候，表示浏览器不能通过 document.cookie 更改Cookies的值，可以避免xss攻击更改Cookies的值。
  • Secure：当这个值为True时，Cookies在HTTP中无效，在HTTPS中才有效
  • SameSite：规定浏览器不能再跨域请求中携带Cookies，减少CSRF攻击

知识点拓展

  • XSS攻击（Cross Site Scripting）：跨站脚本攻击。恶意代码利用站点漏洞，通过巧妙地方式注入到网页中，使用户加载并执行攻击者的恶意代码。一般攻击者成功后，可以获得更高权限，会话和cookie等信息。利用的是用户对指定网站的信任。
  • CSRF攻击（Cross-Site Request forgery）：跨站请求伪造。挟持用户在当前已登录的web应用程序中执行非本意的操作的攻击方法。操作成功后，可以进行例如发邮件，操作转账，购买商品等。利用的是网站对用户浏览器的信任。

Cookies缺陷

  • 大小限制在4kb左右
  • 过多Cookies会浪费带宽性能。同一个域名下所有请求都会带上Cookies。

Cookies的局限，在H5中新增了本地存储方案：WebStorage。分为两类：SessionStorage 和 LocalStorage。

LocalStorage

存储形式key-value键值对

特点

  • 数据一直存储，没有过期时间，除非主动清除
  • 可以在Tab之间共享数据
  • 大小5M左右
  • 易于操作，js可直接调用接口操作
  • 遵循同源策略

局限

  • 高版本浏览器才支持，不过目前主流浏览器都支持
  • 值限定为string类型，需要对JSON对象做一些转换

SessionStorage

相对LocalStorage，SessionStorage保存的数据只用于浏览器的一次会话，当前会话结束（浏览器窗口关闭），数据就会被清空。

特点

  • 会话级别的浏览器存储，数据不能再Tab之间共享
  • 大小为5M左右
  • 遵循同源策略

LocalStorage、SessionStorage都是键值对的形式进行存储，只能存储字符串，要存储对象，需要进行序列化和解析。大小都是5M，用于存储非敏感数据完全够用。但是如果遇到大规模而且结构复杂的数据时，没办法满足需求，这时候可以用到IndexedDB。

IndexedDB

一种低级API，用于客户端存储大量结构化数据（包括文件和blobs）。该API使用索引实现高性能数据搜索，是一个运行在浏览器上的非关系型数据库，它的大小没有存储上限。

特点

  • 键值对存储
  • 操作是异步的，不会造成浏览器卡死
  • 支持事务
  • 遵循同源
  • 大小一般不少于250M，没有上限
  • 支持二进制存储

总结

只有Cookies参与服务端通信，对请求性能有影响。其他的都只用在客户端，不和服务端通信。

接口用法参考MDN文档