简介
IndexDB 是一个在浏览器端运行的非关系型数据库，它允许我们在客户端存储大量数据，而不会影响网络请求或服务器的压力。
随着前端技术的发展，IndexDB 已经成为了前端存储方案的主流之一。本文将详细介绍如何使用 NPM 包 idb 在前端实现简单的 IndexDB 应用，并提供具体的代码示例。
安装
在开始使用 idb 前，我们需要先进行安装。可以在终端中输入以下命令：
npm install idb
基本使用
打开数据库和创建对象仓库
在打开数据库前，我们需要先创建一个对象仓库。这个仓库是用来存储我们的数据的。
import { openDB } from 'idb';
const dbPromise = openDB('my-db', 1, (upgradeDB) => {
upgradeDB.createObjectStore('store-name');
});上述代码中的 openDB 方法会返回一个 Promise，它会在数据库打开成功后才会执行 .then() 函数。如果数据库打开失败，则会执行 .catch() 函数。
数据库升级
在上述代码中，我们给 openDB 方法传递了一个数据库版本号（1）和一个回调函数。
当需要更新数据库时，我们只需增加版本号即可。如果当前版本号已经存在，就会自动跳过 createObjectStore，执行其他操作。
const dbPromise = openDB('my-db', 2, (upgradeDB) => {
if(!upgradeDB.objectStoreNames.contains('new-store')) {
upgradeDB.createObjectStore('new-store');
}
});上述代码中，我们在数据库版本号为 2 时增加了一个叫做 new-store 的对象仓库。
添加数据
要向 IndexDB 中添加数据，我们需要先打开它。
-- -------------------- ---- -------
------------------- -- -
----- -- - ---------------------------- -------------
----- ----- - -----------------------------
-----------
--- --
----- -------
---
---上述代码中的 add 方法可以直接添加一个对象。
获取数据
dbPromise.then((db) => {
const tx = db.transaction('store-name', 'readonly');
const store = tx.objectStore('store-name');
return store.get(1);
}).then((value) => console.log(value));上述代码中的 get 方法可以直接根据对象的 key 获取一个对象。
遍历数据
-- -------------------- ---- -------
------------------- -- -
----- -- - ---------------------------- ------------
----- ----- - -----------------------------
------ -------------------
---------------- ---------------- -
----------- -------
--------------------------
------ ---------------------------------
---上述代码中的 openCursor 方法可以打开游标，并遍历所有数据。
综合示例
下面是一个综合示例，它将使用上述 idb 的 API 来实现一个简单的 TODO 应用程序。
-- -------------------- ---- -------
------ - ------ - ---- ------
----- ----- - --------------------------------------
----- ------ - ------------------------------------
----- -------- - -------------------------------------
----- --------- - ----------------- -- ----------- -- -
------------------------------------------------- -
------------------------------------ - -------- ---- ---
-
---
-------------------------------- -- -- -
------------------- -- -
----- -- - ----------------------- -------------
----- ----- - ------------------------
----- ---- - - --- ----------- ----- ----------- --
----------------------- -- ----------------
---
---
-------- -------------- -
------------------- -- -
----- -- - ----------------------- ------------
----- ----- - ------------------------
------ ---------------
--------------- -- -
------------------ - ---
-------------------- -- -
----- -- - -----------------------------
-------------- - ----------
-------------------------
---
---
-
---------------该应用程序包含一个输入框，以及一个添加按钮和一个用于显示 todo 的列表。它使用 idb 对象仓库来存储 todo，并在用户添加新 todo 时更新列表。
结论
使用 IndexDB 编写应用程序可以让我们更轻松地存储和操作客户端数据，而不必担心与网络请求或服务器的压力问题。
idb 是一个功能强大的 NPM 包，可以帮助我们轻松地在前端构建 IndexDB 应用程序。本文提供的内容足以让开发人员快速上手 idb。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a1e81e8991b448d7c00