能不能说说浏览器的本地存储？各自的优劣如何？

[suukii]

浏览器的本地存储主要分为 Cookie、WebStorage 和 IndexDB，其中 WebStorage 又分为 localStorage 和 sessionStorage。

Cookie

Cookie 是用来做状态存储的，它有几个缺陷：

• 容量小，上限只有 4K。
• 有性能缺陷，因为在同域名下的所有请求都会携带完整的 Cookie，即使是在不需要 Cookie 的情况下，如果这种请求很多，会造成性能浪费。
• 有安全缺陷，因为 Cookie 是以纯文本形式传递的，容易在发送到服务器之前被截获、篡改，另外，HTTPOnly 为 false 的 Cookie 可以通过 JS 读取。

localStorage

localStorage 是持久化存储，它的优点有：

• 容量较大，同一个域名的上限是 5M。
• 不参与和服务器的通信，避免了 Cookie 的性能和安全问题。
• 封装了接口，使用方便。

sessionStorage

sessionStorage 跟 localStorage 一样，除了一个本质的区别，sessionStorage 的存储是会话级别的，在页面关闭之后不会再存在。

IndexDB

IndexDB 是运行在浏览器上的非关系型数据库，为大型数据的存储提供了接口，它的存储容量理论上是无限制的。

[suukii]

Cookie、localStorage、sessionStorage 的使用场景分别是什么？

• Cookie 的设计初衷是为了弥补 HTTP 在状态管理上的不足。因为 HTTP 是一个无状态的协议，服务器没办法分辨客户端，在这个背景下就产生了 Cookie。同一个域名下的所有请求都会带上完整的 Cookie，服务器解析 Cookie 就能拿到客户端的状态。

• localStorage 适合存储一些内容稳定的资源，因为它的特点就是大容量和持久性。

• sessionStorage 适合存储一些页面关闭后就不再需要的信息，比如可以用来存表单信息，保证页面刷新后之前表单信息不会丢失，另外还可以用来存本次浏览的记录。