indexedDB 使用

前言

讲到前端存储，可能会想到 cookie、localStorage、sessionStorage、web SQL database(已经凉了)、indexedDB，本文主要讨论的就是indexedDB。

IndexedDB 就是浏览器提供的本地数据库，它能够被网页脚本建立和操做。IndexedDB 容许储存大量数据，提供查找接口，还能创建索引。这些都是 LocalStorage 所不具有的。

经过使用 indexedDB 来写了一个demo，能够经过访问 个人codepen 查看源码

对比

对比	cookie	localStorage	sessionStorage	indexedDB
存储大小	4kb	5M	5M	很多于 250MB，甚至没有上限
与服务器端通讯	每次都会携带在HTTP头中，若是使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通讯
生命周期	通常由服务器生成，可设置失效时间。若是在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，不然永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除	除非被清除，不然永久保存
使用场景	判断用户是否登陆	存储一些内容稳定的资源。好比图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串	存储一些当前会话的信息，好比微博的 sessionStorage就主要是存储你本次会话的浏览足迹	和 localStorage 用途相似: 1. 存储量会更大 2. localStorage使用简单字符串键值对在本地存储数据，而indexedDB能够存储任意类型的值(适合键值对较多的数据，若是使用 localStorage 存储每次都要写入，写出须要字符串化和对象化) 复制代码

indexedDB 和 localStorage 兼容性对比

查看工具
👇localStorage

👇indexedDB

若是你想指定本身的浏览器是什么内核，什么版本的能够经过浏览器版本检测器查看

使用步骤

打开数据库

var request = window.indexedDB.open(databaseName, version);
复制代码

第一个参数是字符串，表示数据库的名字。若是指定的数据库不存在，就会新建数据库。第二个参数是整数，表示数据库的版本。若是省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。

indexedDB.open()方法返回一个 IDBRequest 对象,这个对象经过三种事件error、success、upgradeneeded，处理打开数据库的操做结果。

success 事件表示成功打开数据库，经过 request.result 拿到数据库对象的结果

upgradeneeded 事件 若是指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded，首次新建数据库也会触发这个事件

打开数据库重点 :

1. 拿到数据库对象的结果，若是已经存在

新建数据库

新建对象仓库（即新建表）,指定表名，指定id做为主键

request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore('person', { keyPath: 'id' ,autoIncrement:true});
}
复制代码

db.objectStoreNames.contains('person') 能够判断表是否已经存在，若是不存在去建立一张新表

新建索引：objectStore.createIndex('address','address') 索引名称，索引所在的属性

建立数据库的重点：

1. 新建对象仓库,至关于表的概念
2. 经过对象仓库来新建索引

增数据 objectStore.add

新建一个事务。新建时必须指定表格名称和操做模式（“只读”或“读写”）。事务的概念很是重要，增删改查的功能都是基于事务来执行的

let transaction = db.transaction('project','readwrite')
let objectStore = transaction.objectStore('project')
let request = objectStore.add(params)
request.onsuccess = function(event){
    let result = event.target.result
}
复制代码

经过事务 transaction.objectStore('project')方法拿到指定对象仓库(表对象)，再经过表对象的 add 方法向表格写入一条数据。

重点：

1. 新建一个事务的概念，任何增删改查的操做以前都须要新建事务
2. 拿到对象仓库(表对象)，而后经过表对象的 add 方法添加数据。
3. 写入数据是异步的过程，表对象操做后会返回一个request对象,能够request对象上的 success,error 事件来监听操做是否成功

删 objectStore.delete

都要 新建事务，因此能够将公共的逻辑抽离出来

const getObjectStore = (db,databaseName)=> {
  return new Promise(resolve=>{
    const objectStore = db.transaction([databaseName], "readwrite").objectStore(databaseName)
    resolve(objectStore)
  })
}
复制代码

// 经过id删除对应数据
    let objectStore = getObjectStore(db,'project');
    const objectStoreRequest = objectStore.delete(id);
    // 删除成功后
    objectStoreRequest.onsuccess = function() {
        resolve('已删除')
    };
复制代码

查 objectStore.get

let objectStore = getObejectStore(db,'project')
let request = objectStore.get(id)
request.onsuccess = function(event){
    // 获取到当前数据
    const record = request.result
}
复制代码

改 objectStore.put

let objectStore = getObejectStore(db,'project')
let request = objectStore.get(id)
request.onsuccess = function(event){
    // 获取到当前数据
    const record = request.result
    // 更新数据库中存储数据
    // 须要保持原来数据的指针，因此不采用直接赋值的方式
    objectStore.put(Object.assign(record,{newKey1:value1})
}
复制代码

结尾

上面只介绍了最基础的增删改查的功能，其实 indexedDB是一个比较复杂的 API，涉及很多概念。想了解更多内容，能够查看我下面推荐连接，也能够看个人 codepen源码实例

参考： IndexedDB API