#yyds干货盘点#聊一聊IndexedDB

Posted 2022-09-07 尼羲

Indexed Database API简称IndexedDB，是浏览器中存储结构化数据的一个方案。IndexedDB背后的思想是创造一套API，方便javascript对象的存储和获取，同时也支持查询和搜索。

IndexedDB是类似于mysql或Web SQL Database的数据库。与传统数据库最大的区别在于，IndexedDB使用对象存储而不是表格保存数据。IndexedDB数据库就是在一个公共命名空间下的一组对象存储，类似于NoSQL风格的实现。既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexedDB 是没有存储上限的（一般来说不会小于 250M）。

1.IndexedDB的特点

• 键值对储存。

IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

• 异步

IndexedDB的设计几乎完全是异步的。为此，大多数操作以请求的形式执行，这些请求会异步执行，产生成功的结果或错误。绝大多数IndexedDB操作要求添加onerror和onsuccess事件处理程序来确定输出。IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 localStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

• 支持事务。

IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

• 同源限制

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

• 储存空间大

IndexedDB 的储存空间比 localStorage 大得多，一般来说不少于 250MB，甚至没有上限。

• 支持二进制储存。

IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

2.IndexedDB 使用流程

在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式。

接下来，通过一个基本的 IndexedDB 使用流程，旨在对 IndexedDB 形成一个感性的认知：

• 打开/创建一个 IndexedDB 数据库（当该数据库不存在时，open 方法会直接创建一个名为 admin 新数据库）

// 后面的回调中，我们可以通过event.target.result拿到数据库实例
  let db
  // 参数1位数据库名，参数2为版本号
  const request = window.indexedDB.open("admin", 1)
  // 使用IndexedDB失败时的监听函数
  request.onerror = function(event) 
     console.log(无法使用IndexedDB)
   
  // 成功
  request.onsuccess  = function(event)
    // 此处就可以获取到db实例
    db = event.target.result
    console.log("你打开了IndexedDB")
  

• 创建一个 object store（object store 对标到数据库中的“表”单位）

// onupgradeneeded事件会在初始化数据库/版本发生更新时被调用，我们在它的监听函数中创建object store
request.onupgradeneeded = function(event)
  let objectStore
  // 如果同名表未被创建过，则新建test表
  if (!db.objectStoreNames.contains(test)) 
    objectStore = db.createObjectStore(test,  keyPath: id )
  

• 构建一个事务来执行一些数据库操作，像增加或提取数据等

// 创建事务，指定表格名称和读写权限
  const transaction = db.transaction(["test"],"readwrite")
  // 拿到Object Store对象
  const objectStore = transaction.objectStore("test")
  // 向表格写入数据
  objectStore.add(id: 1, name: juejin)

• 通过监听正确类型的事件以等待操作完成。

// 操作成功时的监听函数
  transaction.oncomplete = function(event) 
    console.log("操作成功")
  
  // 操作失败时的监听函数
  transaction.onerror = function(event) 
    console.log("这里有一个Error")