得鹿梦鱼 得鹿梦鱼

IndexedDB

一款基于浏览器客户端实现的存储大量的结构化数据的事务型数据库系统, 是一种底层API。该 API 使用索引实现对数据的高性能搜索;
IndexedDB 是一个基于 JavaScript 的面向对象数据库

IndexedDB 执行的操作是异步执行的,以免阻塞应用程序

使用步骤

  1. 打开数据库
  2. 在数据库中创建一个对象存储
  3. 启动事务,并发送一个请求来执行一些数据库操作
  4. 通过监听DOM事件等待操作完成
  5. 对结果进行一些操作

打开数据库

const dbFactory = window.indexedDB.open"TestDatabase"let dbInstance;dbFactory.addEventListener"error", event=>{    console.error`数据库错误:${event.target.errorCode}`;}dbFactory.addEventListener"success", event=>{    dbInstance = event.target.result;}

在数据库中创建一个对象存储

IndexedDB 使用对象存储而不是表,并且一个数据库可以包含任意数量的对象存储。每当一个值被存入一个对象存储时,它会与一个键相关联。键的提供可以有几种不同的方法,这取决于对象存储是使用键路径还是键生成器

键路径键生成器描述
启用禁用可以保存任意类型的值,甚至是像数字和字符串这种原始值。每当我们想要增加一个新值的时候,必须提供一个单独的键参数
启用禁用只能保存 JavaScript 对象。这些对象必须具有一个和键路径同名的属性
禁用启用可以保存任意类型的值。键会为我们自动生成,或者如果你想要使用一个特定键的话你可以提供一个单独的键参数
启用启用只能保存 JavaScript 对象。通常一个键被生成的同时,生成的键的值会被存储在对象中的一个和键路径同名的属性中。然而,如果已存在该属性,该属性的值将被用作键而不会生成一个新的键
const customerData = [  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },];const objectStore = dbInstance.createObjectStore"customers", { keyPath: "ssn" };objectStore.createIndex"name", "name", { unique: false };objectStore.createIndex"email", "email", { unique: true };objectStore.transaction.oncomplete = event => {    // 将数据保存到新创建的对象存储中。    const customerObjectStore = dbInstance      .transaction"customers", "readwrite"      .objectStore"customers";    customerData.forEachcustomer => {      customerObjectStore.addcustomer;    };};