灵魂拷问第2篇：能不能说一说浏览器的本地存储？各自优劣如何？

浏览器的本地存储主要分为Cookie、WebStorage和IndexedDB, 其中WebStorage又能够分为localStorage和sessionStorage。接下来咱们就来一一分析这些本地存储方案。

Cookie

Cookie 最开始被设计出来其实并非来作本地存储的，而是为了弥补HTTP在状态管理上的不足。

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

这种背景下，就产生了 Cookie.

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

Cookie 的做用很好理解，就是用来作状态存储的，但它也是有诸多致命的缺陷的：

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

2. 性能缺陷。Cookie 紧跟域名，无论域名下面的某一个地址需不须要这个 Cookie ，请求都会携带上完整的 Cookie，这样随着请求数的增多，其实会形成巨大的性能浪费的，由于请求携带了不少没必要要的内容。

3. 安全缺陷。因为 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，而后进行一系列的篡改，在 Cookie 的有效期内从新发送给服务器，这是至关危险的。另外，在HttpOnly为 false 的状况下，Cookie 信息能直接经过 JS 脚原本读取。

localStorage

和Cookie异同

localStorage有一点跟Cookie同样，就是针对一个域名，即在同一个域名下，会存储相同的一段localStorage。

不过它相对Cookie仍是有至关多的区别的:

1. 容量。localStorage 的容量上限为5M，相比于Cookie的 4K 大大增长。固然这个 5M 是针对一个域名的，所以对于一个域名是持久存储的。

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

3. 接口封装。经过localStorage暴露在全局，并经过它的 setItem 和 getItem等方法进行操做，很是方便。

操做方式

接下来咱们来具体看看如何来操做localStorage。

let obj = { name: "sanyuan", age: 18 }; localStorage.setItem("name", "sanyuan"); localStorage.setItem("info", JSON.stringify(obj)); 复制代码

接着进入相同的域名时就能拿到相应的值:

let name = localStorage.getItem("name"); let info = JSON.parse(localStorage.getItem("info")); 复制代码

从这里能够看出，localStorage其实存储的都是字符串，若是是存储对象须要调用JSON的stringify方法，而且用JSON.parse来解析成对象。

应用场景

利用localStorage的较大容量和持久特性，能够利用localStorage存储一些内容稳定的资源，好比官网的logo，存储Base64格式的图片资源，所以利用localStorage

sessionStorage

特色

sessionStorage如下方面和localStorage一致:

• 容量。容量上限也为 5M。
• 只存在客户端，默认不参与与服务端的通讯。
• 接口封装。除了sessionStorage名字有所变化，存储方式、操做方式均和localStorage同样。

但sessionStorage和localStorage有一个本质的区别，那就是前者只是会话级别的存储，并非持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了。

应用场景

1. 能够用它对表单信息进行维护，将表单信息存储在里面，能够保证页面即便刷新也不会让以前的表单信息丢失。
2. 能够用它存储本次浏览记录。若是关闭页面后不须要这些记录，用sessionStorage就再合适不过了。事实上微博就采起了这样的存储方式。

IndexedDB

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

关于它的使用，本文侧重原理，并且 MDN 上的教程文档已经很是详尽，这里就不作赘述了，感兴趣能够看一下使用文档。

接着咱们来分析一下IndexedDB的一些重要特性，除了拥有数据库自己的特性，好比支持事务，存储二进制数据，还有这样一些特性须要格外注意：

1. 键值对存储。内部采用对象仓库存放数据，在这个对象仓库中数据采用键值对的方式来存储。
2. 异步操做。数据库的读写属于 I/O 操做, 浏览器中对异步 I/O 提供了支持。
3. 受同源策略限制，即没法访问跨域的数据库。

总结

浏览器中各类本地存储和缓存技术的发展，给前端应用带来了大量的机会，PWA 也正是依托了这些优秀的存储方案才得以发展起来。从新梳理一下这些本地存储方案:

1. cookie并不适合存储，并且存在很是多的缺陷。
2. Web Storage包括localStorage和sessionStorage, 默认不会参与和服务器的通讯。
3. IndexedDB为运行在浏览器上的非关系型数据库，为大型数据的存储提供了接口。