浏览器存储主要分为：Cookie、Local Storage、Session Storage 和 IndexedDB
Cookie
HTTP 协议是无状态协议，客户端向服务端发送请求，服务端返回响应，那么当客户端向服务端再次发送请求，这时服务端并不知道这还是刚才的那个客户端。所以为了避免这种情况的出现，Cookie 诞生了。
Cookie 是为了解决 HTTP 协议在状态管理上的不足，Cookie 实际上就是个很小很小的文本文件，最大只有 4KB，它的内部以键值对的形式来存储。只要匹配到是同一个域名下的请求且路径正确，无论是否需要用到，每次都会携带上 Cookie，这样随着请求数量的增多，势必会造成无谓的性能浪费，这便是 cookie 最大的劣势。
Cookie 的属性
Cookie 的设置是通过响应头的 Set-Cookie 字段，它有几个属性：
-
Expires：Cookie 过期的具体时间点，是个绝对时间。
-
Max-Age：相对时间，如30秒。浏览器收到报文的时间加上 Max-Age 就能得到绝对时间
-
Domian：指定 Cookie 的域名
-
Path：指定 Cookie 的路径。在浏览器发出请求前会对域名和路径进行匹配，如果不满足则不会在请求头中加入 Cookie
-
HttpOnly：只允许 Cookie 通过 HTTP 协议传输，禁止其他方式的访问。意味着禁止 JS 引擎使用 document.cookie 来访问，对防范 XSS 攻击有很大的好处。
-
SameSite：防范 CSRF 攻击的利器，通常由以下三个值
- Strict：完全禁止第三方 cookie，只有当前站点与请求目标站点一致时才会携带上 cookie
- Lax：从第三方站点打开链接、从第三方站点提交 GET 表单以及预加载这三种方式会携带 Cookie。其他请求不会携带。
- None：任何情况下都会发送 cookie
-
Secure：表示这个 Cookie 只能用 HTTPS 协议来传输。但是Cookie 还是以明文的形式存在。
Local Storage
Local Storage 有以下几个特性：
- 存储：存储容量每个浏览器支持大小不一样，一般可达到 5 M，与 Cookie 一样以键值对形式存储
- 位于浏览器端，与Cookie不一样的是它不与服务端发生通信。
- 生命周期：Local Storage 是本地持久化存储，存储在其中的数据是永远不会过期的，除非手动删除。
- 作用域：Local Storage、Session Storage 都遵循同源策源，与 Cookie 一样在同个域名下，会存储相同的一段 Local Storage。
- 接口封装好，下面展示的就是存储的操作方式
let obj = {a: 1}
localStorage.setItem('obj', JSON.stringify(obj)); // 存储数据
localStorage.getItem('obj') // 读取数据
localStorage.removeItem('obj') // 删除数据
localStorage.clear() // 清空数据
应用场景：利用 Local Storage 能够存储较大容量数据和持久性，可以利用 Local Storage 存储一些稳定的资源，比如官网的 logo，存储 base64 编码的图片资源，还有一些不经常更新的CSS、JS 等静态资源。
Session Storage
Session Storage 与 Local Storage 非常类似，容量上限为 5 M，不参与服务器通信，操作方式与存储方式都一样。但有一点不同的是，Session Storage 存储的是会话级别的信息，当会话结束时（页面关闭）存储内容也会消失。
应用场景：利用 Local Storage 存储会话级别信息的特性，可以利用其来维护表单信息，这样即时页面刷新了，表单信息还是存在，如果页面关闭，存储的内容也会消失。
IndexedDB
IndexedDB 是运行在浏览器上的一个非关系型数据库，所以它的内部是以 key-value 的形式存储的，从理论上来讲它的存储容量是没有上限的。
应用场景：可以把 IndexedDB 看做是 Local Storage 的升级版，当数据复杂度和规模上升到 Local Storage 无法处理的地步时就可以考虑使用 IndexedDB。
