npm 包 idb-lite 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 idb-lite

idb-lite 是一个基于 IndexedDB API 封装的轻量级 JavaScript 库，主要用于在客户端浏览器中存储数据。它提供简洁易用的 API，可用于存储和检索复杂数据结构。与 LocalStorage 不同，IndexedDB 具有更高的存储容量限制，更大的性能提升和更复杂的数据结构支持。

安装

我们可以使用 npm 包管理工具将 idb-lite 安装到项目中：

npm install idb-lite --save

使用

为了使用 idb-lite 来存储数据，首先我们需要创建一个数据库。请务必在 Web Workers 和 Service Workers 中使用 idb-lite，因为 IndexedDB API 在这些环境下运行得更好。如果您使用 ES6 导入语法，请使用以下方法导入 idb-lite：

import idb from 'idb-lite';

在使用之前，必须先定义需要存储的内容类型。以下示例创建了一个名为 “people” 的对象存储标识符，用于存储简单的人员信息：

const store = idb('my-db', 1, {
  people: {
    keyPath: 'id',
  },
});

store.people.put({ id: 1, name: 'John' });
store.people.put({ id: 2, name: 'Doe' });

现在，我们已经成功地创建了一个存储人员对象的数据表，并通过 put() 方法向其中添加了一些数据。idb-lite 还支持许多其他方法，其中包括以下几个：

get(id) - 返回具有给定 ID 的对象。
getAll() - 返回存储在对象存储中的所有数据。
cursor() - 允许您使用游标遍历对象存储。

以下是一个使用 get() 方法获取一条数据记录的示例：

const person = await store.people.get(1);
console.log(person);
// Output: { id: 1, name: 'John' }

此外，由于您的存储已经定义为可以拥有多个对象存储标识符，因此您可以使用 idb.open() 方法来打开一个已经存在的数据库。

const db = await idb.open('my-db', 1, { people: { keyPath: 'id' } });

常见问题

如何处理默认值？

当您使用 put() 方法将数据添加到对象存储时，如果该数据对象不具有对象包含的所有属性，这些属性将被设置为未定义。如果您需要设置默认值，则可以使用以下方式：

const person = { id: 1 };
const defaults = { name: 'Unknown', email: 'unknown@example.com' };
store.people.put(Object.assign(defaults, person));

如何删除？

要删除对象存储中的一个数据对象，请使用 delete() 方法。

store.people.delete(1);

如何检查是否存在？

要检查特定 ID 的数据是否存在于对象存储中，请使用 get() 方法。如果数据存在，则会返回相应的对象，并且返回值可以转换为布尔值 true；如果不存在，则返回 undefined。

const person = await store.people.get(1);
if (person) {
  console.log('Person with ID 1 exists!');
} else {
  console.log('Person with ID 1 does not exist.');
}

如何升级数据库结构？

当您的数据库需要进行结构上的更改时，您可以指定新版本号并提供一个可选的回调函数，其中包含更改数据库结构的指令列表。例如：

const store = idb('my-db', 2, {
  people: { keyPath: 'id', autoIncrement: true },
});

// Upgrade schema version 1 to 2
store.upgrade(1, (db) => {
  const peopleStore = db.createObjectStore('people', {
    keyPath: 'id',
    autoIncrement: true,
  });

  // Add new index named `email`
  peopleStore.createIndex('email', 'email');
});

以上代码将会创建一个名为 “people” 的对象存储，具有自动增量 ID 和一个名为 “email” 的新索引。

结语

idb-lite 是一个十分实用的 IndexedDB API 封装库，这个教程中我们了解到了如何使用它在浏览器中存储数据，包括如何创建数据库，存储和检索数据和如何升级数据库结构。希望本文能够对初学者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53ca4