数据存储之IndexedDB

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

在开发Web应用的过程当中，会设计一些数据的存储需求，常见的存储方式可能有：保存登陆态的Cookie；使用浏览器本地存储的LocalStorage和SessionStorage；客户端数据持久化存储方案涉及的WebSQL和IndexedDB；直接存储在本机的文件系统上等。

往期文章查看：数据存储之Cookie|8月更文挑战

本章主要讲述IndexedDB的特性以及打开/新建数据库、对数据增删改查、创建索引等基础的操做。

---

IndexedDB

IndexedDB是一种事物型数据库系统，其事物型相似基于SQL的关系型数据库管理系统（RDBMS），但其并不像RDBMS使用固定列表，而是一种基于JavaScript的面对对象的数据库，更接近于NoSQL。它具备如下5个特色。

• 存储空间大，相比于LocalStorage和SessionStorage根据不一样浏览器可能不足10MB的，IndexedDB通常来讲不会少于250MB，甚至没有上限。
• 支持事务，即知足事务操做所要求的的原子性，若在事务的一系列操做步骤中有一步失败，整个事务就会取消，IndexedDB便会回滚到事务发生以前的状态，不存在仅修改部分数据的状况。
• 支持多种数据模型，IndexedDB采用对象仓库存放数据，全部类型的数据均可以以键/值对的形式进行存储，每条数据都由惟一的主键进行索引。存储的类型不只能够是对象、字符串，还能够是二进制数据。
• 同源约束，每一个网页只能访问其自身域名下的数据库，不能跨域访问。
• 异步，IndexedDB的数据操做不会阻塞浏览器主线程，这让其能够在读写大量数据时也不会拖慢网页。

---

怎样使用

打开或新建数据库

使用IndexedDB的第一步就是打开或新建一个数据库对象，具体代码示例以下：

// 根据所指定的数据库名称去打开数据库，若不存在则会新建数据库，第二个参数为数据库的版本号
const request = window.indexedDB.open('my_indexeddb','1.0')
// 数据库打开后的操做请求对象，经过三种事件来处理打开操做的结果
request.onerror = function(event) {
  console.log('数据库打开失败')
}
// 数据库打开成功后，即可以经过request对象中的result属性拿到数据库对象
request.onsuccess = function(event){
  // 数据库对象
  const db = request.result
}

/**
* 若是打开数据库时指定的版本号大于实际版本号，则会触发数据库升级事件；
* 而新建数据库必然会触发该事件，一般新建数据库以后的第一件事情即是建立对象仓库对象，即建立表
*/

request.onupgradeneeded = function(event) {
  const db = event.target.event
  let objectStore
  // 判断所要建立的日志表log对象是否存在，不存在再进行建立
  if(!ob.objectStoreName.contains('logs')){
    // 建立日志表对象，并指定主键
    objectStore = db.createObjectStore('logs', {keypath: 'id'})
  }
}
复制代码

数据的增删改查

新增数据须要先建立一个事务，而后使用objectStore()方法拿到IDBObjectStore后，经过add()方法进行数据的添加，示例代码以下：

// 以读写模式建立对日志表logs的事务，而后经过对象存储对象的add()方法添加一条数据
const request = db.transaction(['logs'], 'readwrite')
                .objectStore('logs')
                .add({id:1, log: 'hello IndexedDB', time: 1628003429409, user: 'Jack'})
// 可根据业务需求经过成功或失败事件进行后续处理
request.onsuccess = function(event){console.log('新增数据成功')}
request.onerror= function(event){console.log('新增数据失败')}
复制代码

与新增数据相似，只需将add()方法替换成其余相应的方法就可实现删除、修改及查询功能，删除使用delete()方法，修改使用put()方法，查询使用get()方法。另外在查找时还可对表中数据进行遍历，代码示例以下：

// 建立对象存储对象后，经过打开指针对象的异步方法进行遍历
const objectStore = db.transaction('logs').objectStore('logs')
objectStore.openCursor().onsuccess = function(event) {
  // 每次获得数据表中的一个数据项
  const cursor = event.target.rusult
  if(cursor){
    console.log('id:', cursor.key)
    console.log('log:', cursor.value.log)
    // 指针移动至下一个数据项
    cursor.continue()
  } else {
    console.log('已无更多数据')
  }
}
复制代码

创建索引

创建索引可让咱们搜索数据表中的任意字段值，若是没有索引，则默认只能从主键进行取值。好比对于日志表可在新建时对用户user字段创建索引，代码以下：

objectStore.createIndex('user', 'user', { unique: false })
复制代码

建立了索引后，即可使用user进行相关数据向的查找了，代码示例以下：

const request = db.transation(['logs'], 'readonly')
                .objectStore('logs')
                .index('user')
                .get('Jack')
// 查找到数据结果后，经过事件处理方法进行相应处理
request.onsuccess = function(event) {
  const result = event.target.result
  if(result){
    // ...相应处理
  }
}
复制代码

---

总结

IndededDB所包含的API相对复杂一些，但只需在基本操做流程中掌握其从不一样是体重抽象出的对象接口，这些尸体对象接口包括：数据库对象IDBDatabase、对象仓库对象IDBObjectStore、索引对象IDBIndex、事务对象IDBTransaction、操做请求对象IDBRequest、指针对象IDBCursor、主键集合对象IDBKeyRange。