在 Web 开发中，我们经常会需要将数据存储在浏览器本地。在过去，我们通常使用 localStorage 或 IndexedDB API 来实现这样的需求，但它们的 API 显得有些晦涩难懂，而数据结构在变复杂时也难以管理。于是，一些开发者推出了一种新型的 IndexedDB 库：idb。
idb 是一个 IndexedDB 库，它基于 Promises，使用简单且功能强大。在本篇文章中，我们将介绍 idb 的使用方法，让你轻松进入它的世界，让开发变得更加简单。
应用场景
使用 idb 库存储数据，可以方便地进行本地数据存储。如果你正在开发一个 Web 应用，它需要大量数据的读写和存储，那么 idb 可以提供很大的帮助，特别是你需要一个强大的 IndexedDB 库来处理数据，并适用于许多浏览器。
以下是 idb 库的一些应用场景：
- 在无网络的情况下存储数据
- 离线工作
- 加载数据更快，减轻服务器负担
安装 idb 库
首先，要在你的项目中安装 idb 库。你可以使用以下命令：
npm install idb --save
这将安装 idb 库，并将其添加到你的 package.json 文件中。
创建数据库
在使用 idb 前需要创建一个数据库，我们来看一下如何使用 idb 创建一个数据库结构：
import { openDB } from 'idb'; const dbPromise = openDB('databaseName', 1, { upgrade(upgradeDB) { upgradeDB.createObjectStore('storeName', { keyPath: 'id', autoIncrement: true }); }, });
函数 openDB 创建了一个新的 IndexedDB 数据库并将其保存在变量 dbPromise 中。它接受三个参数：
databaseName：指定您的数据库名称version：指定您的数据库的版本，如果新版本是一个非整数值，那么不会为它预留空间。upgrade：一个回调函数，用于在升级时创建或更新数据库结构。
在上面的例子中，createObjectStore 方法创建并返回一个新的对象存储器，并为它设置了其名称。keyPath 参数用于指定存储的数据集合的键，autoIncrement 参数可以使得主键自增长。
我们现在已经创建了一个新的数据库。下一步是向该数据库中添加数据。
添加和检索数据
我们来看看如何使用 idb 添加数据和检索数据。以下是一个简单的示例：
-- -------------------- ---- ------- ----- --------- - ----- -- -- - ----- -- - ----- ---------- ----- -- - --------------------------- ------------- ----- ----- - ---------------------------- ----- ------- - - --- -- ----- ------- ------ ----------------- -- ------------------- ----- ------------ ------------------------- ----- -------- -- ----- --------- - ----- -- -- - ----- -- - ----- ---------- ----- -- - --------------------------- ------------ ----- ----- - ---------------------------- ----- ------- - ----- ------------- --------------------- ----- ------------ --展开代码
在将数据添加到数据库中之前，我们需要先获取一个事务，再通过对象存储名称打开一个 Store，然后使用 add 方法将数据添加到 Store 中。
要检索数据，使用 get 方法从 Store 中检索数据，它需要一个索引键作为参数来获取特定的项。最后，通过 complete 属性告诉 IndexedDB 你已经完成事务。
综述
在这篇文章中，我们了解了如何使用 idb 库进行本地数据存储。从安装 idb 库到创建和使用数据库，甚至了解如何添加和检索数据，都已经被介绍了。如果你想使用 idb 来代替其他本地存储库，这将是一个非常大的工具，特别是如果你的数据不太适合 localStorage 或 IndexedDB API 时，它会变得非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68254
