浏览器的本地存储 ​

浏览器的本地存储主要分为 Cookie、 WebStorage 和 IndexedDB, 其中 WebStorage 又可以分为 localStorage 和 sessionStorage。

Cookie ​

Cookie 由来 ​

cookie 最开始被设计出来其实不是用来做本地存储的，而是为了弥补 HTTP 在状态管理上的不足。（HTTP 是无状态协议）。

HTTP 协议是一个无状态协议，客户端向服务器发请求，服务器返回响应，故事就这样结束了，但是下次发请求如何让服务端知道客户端是谁呢？cookie 就这样产生了。

Cookie 本质上就是浏览器里面存储的一个很小的文本文件，内部以键值对的方式来存储数据。向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。

Cookie 缺陷 ​

• 1、容量缺陷。 Cookie 的体积上限只有4KB，只能用来存储少量的信息。

• 2、性能缺陷。 Cookie 紧跟域名，不管域名下面的某一个地址需不需要这个 Cookie ，请求都会携带上完整的 Cookie，这样随着请求数的增多，其实会造成巨大的性能浪费的，因为请求携带了很多不必要的内容。

• 3、安全缺陷。由于 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被非法用户获取，然后进行一系列的篡改，在 Cookie 的有效期内重新发送给服务器，这是相当危险的。另外，在 HttpOnly 为 false 的情况下，Cookie 信息能直接通过 JS 脚本来读取。

localStorage ​

localStorage 的特点 ​

• 1、针对一个域名，即在同一个域名下，会存储相同的一段 localStorage。（和 cookie 一样）

• 2、localStorage 的容量上限为 5M （针对一个域名的容量），比 cookie 的 4k 大大增加。

• 3、只存在客户端，默认不参与与服务端的通信。这样就很好地避免了 Cookie 带来的性能问题和安全问题。

• 4、接口封装。通过 localStorage 暴露在全局，并通过它的 setItem 和 getItem 等方法进行操作，非常方便。不过有一点要注意，localStorage 其实存储的都是字符串，如果是存储对象需要调用 JSON 的 stringify 方法，并且用 JSON.parse 来解析成对象。

应用场景 ​

• 利用 localStorage 的较大容量和持久特性，可以利用 localStorage 存储一些内容稳定的资源，比如官网的 logo，存储 Base64 格式的图片资源等。

sessionStorage ​

sessionStorage 的特点 ​

• 1、容量上限为 5M。
• 2、只存在客户端，默认不参与与服务器的通信。
• 3、接口封装。除了 sessionStorage 名字有所变化，存储方式、操作方式均和 localStorage 一样。
• 4、 sessionStorage 只是会话级别的存储，并不是持久化存储，会话结束即页面关闭后，这个页面的 sessionStorage 就会被清除了。

应用场景 ​

• 可以用它来做无痕浏览。sessionStorage 存储本次浏览记录。关闭页面后历史记录就被清除了。

IndexedDB ​

• IndexedDB 是运行在浏览器中的非关系型数据库, 本质上是数据库，绝不是和刚才 WebStorage 的 5M 一个量级，理论上这个容量是没有上限的