前言

此处，仅介绍这三种最常见的浏览器本地存储方式及其区别，至于其他浏览器的本地存储如IndexDB不会做介绍，感兴趣的可以去看相关文档。

cookie

基本认识

你我均知晓，HTTP 协议是一个无状态协议，客户端向服务器发请求，服务器返回响应，这样的“请求-响应”一问一答的故事就这样结束了，由于无法保存上一次访问状态记录，所以下次发请求，服务端对客户端是谁便无从知晓。

所以Cookie 最开始被设计出来弥补HTTP在状态管理上的不足，并非用于浏览器本地存储。

向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。

cookie工作流程

从上图可知，浏览器首次请求时，并没有携带cookie信息，但服务器在后端会给此次请求设置cookie值并放入响应信息中返回给客户端，那么客户端下次再发送请求的时候并可以带上该cookie值，服务器拿到这个请求中的cookie值一看，哟呵，老朋友了，上次来过，资源让他用吧。

cookie可以设置的值

在首次请求时，服务器会设置cookie值然后返回给客户端。那么服务器在设置cookie时，它可以设置哪些字段值呢？

• name：设置cookie名
• Expirse：设置cookie过期时间（时刻）
• Max-age：设置cookie有效时间（时间段）
• Domain：设置cookie可以送达的主机名，未指定则不包含子域名
• Path：指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部。如果 path=/docs，那么 “/docs”, “/docs/Web/” 或者 “/docs/Web/HTTP” 都满足匹配的条件）
• Secure：一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。（一般保密信息不用cookie传）
• HttpOnly：不能使用Document.cookie，也不能使用XMLHtppRequest API访问。防XSS跨站脚本攻击
• SameSite：可以设置为三个值，Strict、Lax和None。可以预防跨站请求伪造攻击
  • 在Strict模式下，浏览器完全禁止第三方请求携带Cookie。比如请求sanyuan.com网站只能在sanyuan.com域名当中请求才能携带 Cookie，在其他网站请求都不能
  • 在Lax模式，就宽松一点了，但是只能在 get 方法提交表单况或者a 标签发送 get 请求的情况下可以携带 Cookie，其他情况均不能
  • 在None模式下，也就是默认模式，请求会自动携带上 Cookie

cookie的应用

• 身份识别
• 广告跟踪

localStorage

localStorage有一点跟Cookie一样，就是针对一个域名，即在同一个域名下，会存储相同的一段localStorage。

let obj = { name: "sanyuan", age: 18 };
localStorage.setItem("name", "sanyuan"); 
localStorage.setItem("info", JSON.stringify(obj));

let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));

localStorage的作用

归根结底就两个作用：持久化存储与跨页面传数据

持久化存储不会出问题，存不进去就存不进去呗，取不出来就去其它地方取，或者不取。

问题就出在跨页面传数据上，上一个页面因为 localStorage 存满导致数据没有写入，下一个页面读取数据为空，从而导致错误。可以解决的方法：

• 划分子域
• 跨页面传数据：考虑单页应用、优先采用 url 传数据
• 用 indexedDB 存文件类型的数据，localStorage 存业务数据

sessionStorage

sessionStorage的应用

• 可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失
• 可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式

三者区别的总结