浏览器本地存储（cookie、sessionStorage和localStorage）

1、Cookie

特点：存储大小4KB左右；可设置失效时间；通信时会携带在HTTP头中，使用cookie保存过多数据会影响性能。

注意：cookie的跨域可以理解为跨域名，只要二级域名相同，不涉及到端口，数据就是共享的。

实用场景：Cookie和session结合使用，通信时后端生成sessionId存储到Cookie中，用户每次请求都会携带这个sessionId，这样服务端就知道是谁发起的请求，从而响应相应的信息。(可能受到csrf攻击)

【session 依赖于cookie实现存储在服务端，不同于sessionStorage存储在客户端】

Cookie的字段：

Name：cookie的名称

Value：cookie的值，对于认证cookie，value值包括web服务器所提供的访问令牌；

Size： cookie的大小

Path：可以访问此cookie的页面路径。比如domain是abc.com，path是/test，那么只有/test路径下的页面可以读取此cookie。

Domain：可以访问该cookie的域名，Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。

HTTP：该字段包含HTTPOnly 属性，该属性用来设置cookie能否通过脚本来访问，默认为空，即可以通过脚本访问。

Expires/Max-size ：此cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效

Cookie的使用：

方式一：http response header中的set-cookie，默认情况下，domain 被设置为设置 Cookie 页面的主机名，可指定过期时间。

Set-Cookie: id=a3fWa; Expires=Wed, 11 Oct 2022 06:30:00 GMT;

方式而：通过document.cookie可以读写cookie

document.cookie='userName=hello;domain=.aaa.com'

2、SessionStorage

特点：存储大小5MB左右；存储再本地窗口关闭时会清空数据；SessionStorage只有在同一浏览器的同一窗口下才能够共享,有跨域限制，不能被爬虫爬取。

实用场景：SessionStorage具有时效性，所以可以用来存储一些网站的游客登录的信息，还有临时的浏览记录，当关闭网站之后，这些信息也就随之消除了。

SessionStorage的使用：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();// 获取某个索引的Key
sessionStorage.key(index)

3、LocalStorage

特点：存储大小跟SessionStorage相同5MB左右；本地持久储存，除非主动清理数据才会消失；有跨域限制，不能被爬虫爬取。

实用场景：JWT实现鉴权时，一把将token存在LocalStorage

LocalStorage的使用同SessionStorage

总结：

cookies：在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦，需要⾃⾏封装；
localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为5M，兼容IE8+ ；
sessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式；

补充：

IndexedDB：是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常便。

参考：cookie、sessionStorage、localStorage 详解及应用场景 - SegmentFault 思否