IndexedDB 是浏览器原生提供的一个客户端存储方案，其可以存储大量的结构化数据，支持事务和索引等高级特性。然而，IndexedDB API 的使用却相对复杂繁琐，需要开发者自己编写大量的异步代码来实现数据的增删改查等操作。为了简化 IndexedDB 的使用，Dexie.js 库应运而生。
Dexie.js 简介
Dexie.js 是一款轻量级的 IndexedDB 封装库，其提供了简单易用的 API，可以方便地进行 IndexedDB 数据库的创建、打开、升级、查询等操作，同时也提供了事务、索引、批量操作等高级特性。Dexie.js 的 API 设计灵活、易于扩展，可以满足各种场景下的需求。
Dexie.js 的使用
安装
Dexie.js 可以通过 npm 安装：
npm install dexie --save
也可以直接下载源码，引入 dexie.js 文件。
创建数据库
使用 Dexie.js 创建 IndexedDB 数据库非常简单，只需要继承 Dexie 类，并在构造函数中定义数据库的名称和数据结构即可：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------- ------- ----- -
------------- -
--------------------
------------------------
------ ----------------
--------- --------------------
---
-
-
----- -- - --- -------------上述代码创建了一个名为 myDatabase 的 IndexedDB 数据库，包含两个对象存储空间 users 和 articles，分别存储用户和文章的数据。users 对象存储空间定义了三个属性：id、name、age，其中 id 为自增主键，name 和 age 分别为用户名和年龄。articles 对象存储空间定义了三个属性：id、title、content，其中 id 为自增主键，title 和 content 分别为文章标题和内容。
数据的增删改查
使用 Dexie.js 对数据进行增删改查也非常方便，其 API 设计符合 Promise 风格，可以直接使用 async/await 进行异步操作。
添加数据
使用 add() 方法向对象存储空间中添加数据：
const user = { name: 'Tom', age: 18 };
const article = { title: 'Dexie.js', content: 'A lightweight IndexedDB wrapper library.' };
await db.users.add(user);
await db.articles.add(article);更新数据
使用 put() 方法更新对象存储空间中的数据：
const user = { id: 1, name: 'Jack', age: 20 };
await db.users.put(user);删除数据
使用 delete() 方法删除对象存储空间中的数据：
await db.users.delete(1);
查询数据
使用 where() 方法查询对象存储空间中符合条件的数据：
const users = await db.users.where('age').above(18).toArray();
const articles = await db.articles.where('title').startsWith('Dexie').toArray();上述代码查询了年龄大于 18 岁的所有用户和标题以 Dexie 开头的所有文章。
事务和索引
Dexie.js 支持事务和索引等高级特性，可以大大提高 IndexedDB 数据库的性能和灵活性。
事务
使用 transaction() 方法可以开启一个事务，将多个数据操作放在同一个事务中可以保证数据的一致性和可靠性：
await db.transaction('rw', db.users, db.articles, async () => {
// 在事务中进行数据操作
await db.users.add({ name: 'Tom', age: 18 });
await db.articles.add({ title: 'Dexie.js', content: 'A lightweight IndexedDB wrapper library.' });
});上述代码开启了一个读写事务，对 users 和 articles 两个对象存储空间进行了数据操作。
索引
使用 index() 方法可以定义对象存储空间的索引，可以大大提高查询数据的速度：
-- -------------------- ---- -------
----- ---------- ------- ----- -
------------- -
--------------------
------------------------
------ -----------------------
--------- --------------------------
---
-
-
----- ----- - ----- ------------------------------------------------------------
----- -------- - ----- ---------------------------------------------- ------------------上述代码定义了 users 和 articles 两个对象存储空间的 email 和 tags 两个属性为索引，可以使用 where() 方法进行查询操作。
批量操作
使用 Dexie.js 还可以进行批量操作，将多个数据操作放在同一个批处理中可以大大提高数据的处理效率：
-- -------------------- ---- -------
----- ----- - -
- ----- ------ ---- -- --
- ----- ------- ---- -- --
- ----- ------- ---- -- -
--
----- -------------------- --------- ----- -- -- -
--- ------ ---- -- ------ -
----- -------------------
-
---上述代码使用事务和循环结构将多个用户数据添加到 IndexedDB 数据库中。
总结
Dexie.js 是一款轻量级的 IndexedDB 封装库，其提供了简单易用的 API，可以方便地进行 IndexedDB 数据库的创建、打开、升级、查询等操作，同时也提供了事务、索引、批量操作等高级特性。使用 Dexie.js 可以大大提高 IndexedDB 数据库的开发效率和性能，是前端开发中不可或缺的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c814dcadd4f0e0ff1f64ff