浏览器存储cookie、webStorage、IndexedDB

cookie与web storage

存储方式	作用与特性	存储数量及大小	api
cookie	● 存储用户信息，获取数据需要与服务器建立连接。  ● 可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。  ● 可设置过期时间。	● 最好将cookie控制在4095B（4kb）以内，超出的数据会被忽略。	原生、$.cookie（详见上文）
localStorage	● 存储客户端信息，无需请求服务器。  ● 数据永久保存，除非用户手动清理客户端缓存。  ● 开发者可自行封装一个方法，设置失效时间。	5M左右，各浏览器的存储空间有差异。	// 保存数据到 localStorage  localStorage.setItem(‘key’, ‘value’);  // 从 localStorage 获取数据  let data = localStorage.getItem(‘key’);  // 从 localStorage 删除保存的数据  localStorage.removeItem(‘key’);  // 从 localStorage 删除所有保存的数据  localStorage.clear();
sessionStorage	● 存储客户端信息，无需请求服务器。  ● 数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。	同localStorage	// 保存数据到 sessionStorage  sessionStorage.setItem(‘key’, ‘value’);  // 从 sessionStorage 获取数据  let data = sessionStorage.getItem(‘key’);  // 从 sessionStorage 删除保存的数据  sessionStorage.removeItem(‘key’);  // 从 sessionStorage 删除所有保存的数据  sessionStorage.clear();

web storage的优势

• 可存储的数据量大了4kb-5M
• api更友好了

web storage不足：

• 数据结构类型
• 大小（大数据量、离线应用serviceWork）

sessionStorage.setItem('age', 18);
const age = sessionStorage.getItem('age');
typeof age

IndexedDB简介

MDN官网是这样解释Indexed DB的：

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

IndexedDB特点

（1） 非关系型数据库(NoSql)

我们都知道MySQL等数据库都是关系型数据库，它们的主要特点就是数据都以一张二维表的形式存储，而Indexed DB是非关系型数据库，主要以键值对的形式存储数据。

（2）持久化存储

cookie、localStorage、sessionStorage等方式存储的数据当我们清楚浏览器缓存后，这些数据都会被清除掉的，而使用IndexedDB存储的数据则不会，除非手动删除该数据库。

（3）异步操作

IndexedDB操作时不会锁死浏览器，用户依然可以进行其他的操作，这与localstorage形成鲜明的对比，后者是同步的。

（4）支持事务

IndexedDB支持事务(transaction)，这意味着一系列的操作步骤之中，只要有一步失败了，整个事务都会取消，数据库回滚的事务发生之前的状态，这和MySQL等数据库的事务类似。

（6）同源策略

IndexedDB同样存在同源限制，每个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（7）存储容量大

这也是IndexedDB最显著的特点之一了，这也是不用localStorage等存储方式的最好理由。

IndexedDB重要概念讲解

1. 仓库objectStore

IndexedDB没有表的概念，它只有仓库store的概念，大家可以把仓库理解为表即可，即一个store是一张表。

2. 索引index

在关系型数据库当中也有索引的概念，我们可以给对应的表字段添加索引，以便加快查找速率。在IndexedDB中同样有索引，我们可以在创建store的时候同时创建索引，在后续对store进行查询的时候即可通过索引来筛选，给某个字段添加索引后，在后续插入数据的过成功，索引字段便不能为空。

3. 游标cursor

游标是IndexedDB数据库新的概念，大家可以把游标想象为一个指针，比如我们要查询满足某一条件的所有数据时，就需要用到游标，我们让游标一行一行的往下走，游标走到的地方便会返回这一行数据，此时我们便可对此行数据进行判断，是否满足条件。

【注意】：IndexedDB查询不像MySQL等数据库方便，它只能通过主键、索引、游标方式查询数据。

4. 事务

IndexedDB支持事务，即对数据库进行操作时，只要失败了，都会回滚到最初始的状态，确保数据的一致性。

IndexedDB实操

/**
 * 打开/创建数据库
 * @param {string} dbName 数据库名称
 * @param {number} version 数据库版本
 * @returns 
 */
function openDB(dbName, version =