存储

一、localStorage

介绍：
localStorage是HTML5的新特性，这个特性可以把数据进行本地存储，就是把数据存储在浏览器中，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

使用方法：
1、新增

localStorage.setItem('myName', 'Tom');

（第一个参数为key，第二个参数为value）

2、获取

localStorage.getItem('myName');

（使用key进行获取，得到value）

3、移除

localStorage.removeItem('myName');

（通过key进行移除）

4、移除所有

localStorage.clear()

二、sessionStorage

介绍：
sessionStorage 属性允许你访问一个，对应当前源的 session [Storage](https://developer.mozilla.org/zh-CN/docs/Web/API/Storage) 对象。它与 [localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

使用方法：
1、新增

sessionStorage.setItem('myName', 'Tom');

（第一个参数为key，第二个参数为value）

2、获取

sessionStorage.getItem('myName');

（使用key进行获取，得到value）

3、移除

sessionStorage.removeItem('myName');

（通过key进行移除）

4、移除所有

sessionStorage.clear()

三、IndexDB

IndexedDB 可以看成浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

体验似 localstorage 方法的 indexDB 操作：https://www.npmjs.com/package/indexdb-storage
1、安装

npm i indexdb-storage --save

2、引入

import { IndexDBStorage } from 'indexdb-storage'

3、使用

const dbStorage = new IndexDBStorage({
  name: 'testdb'
})
// 数据设置
dbStorage.setItem('hello', {
  a: 1,
  b: {
    c: 2
  }
})
// 数据获取
dbStorage.getItem('hello').then((d) => {
  console.log(d)
})
// 数据清除
dbStorage.clean()

其他库：https://www.npmjs.com/package/indexdb-store