浏览器的存储以及它们之间的区别

Question

1. cookie

cookie 是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。

作用：

1. 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
2. 个性化设置（如用户自定义设置、主题等）
3. 浏览器行为跟踪（如跟踪分析用户行为等）

Cookie 类型：

1. 会话期 Cookie 会在当前的会话结束之后删除。
2. 持久性 Cookie 在过期时间（Expires）指定的日期或有效期（Max-Age）指定的一段时间后被删除。

设置 HttpOnly 可以防止客户端 通过 JS 读取 cookie，避免XSS攻击

SameSIte 属性允许服务器指定是否/何时通过跨[站点请求发送。这提供了一些针对跨站点请求伪造攻击CSRF的保护。它采用三个可能的值：Strict、Lax 和 None。Chrome80 后默认是 Lax。

1. Strict 仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
2. Lax 允许部分第三方请求携带 Cookie
3. None 无论是否跨站都会发送 Cookie

一般来说，每个域名下的 Cookie 数量限制在20个左右，每个 Cookie 的大小限制在4KB左右

2. localStorage

同源可以进行访问

浏览器的长期存储，不会自动被删除。

大小限制 5M

3. sessionStorage

sessionStorage 是临时的，浏览器关闭就会清除。

同个页面在不同tab 打开，sessionStorage 相互隔离。

从页面打开的页面，它们会在同一个浏览器上下文中运行，因此它们可以共享 sessionStorage 中的数据

4. indexedDB

浏览器的数据库， 可以存储大量的数据，可以离线访问，可以存储二进制。