Dexie.js 与 IndexedDB 详细对比

🕗 发布于 2025-01-19 22:35 javascript 前端 开发语言 Dexie.js IndexedDB

Dexie.js 与 IndexedDB 详细对比

IndexedDB 是浏览器内置的 NoSQL 数据库 API，而 Dexie.js 是基于 IndexedDB 的轻量级封装库，提供了更友好的 API 和更高效的操作方式。下面从多个维度对比两者的区别，并分析 Dexie.js 如何简化开发流程。

1. API 复杂度

对比项	IndexedDB	Dexie.js
API 复杂度	复杂，使用 `IDBRequest`、`IDBTransaction`、`IDBObjectStore` 等对象进行操作	简洁，提供类似 Promise 和 ORM 风格的 API
代码风格	事件驱动，回调嵌套较深（常见“回调地狱”）	支持 Promise 和 async/await，更符合现代 JavaScript 编程风格
事务管理	需要手动创建 `transaction` 并指定 `objectStore`	自动管理事务，减少显式声明
错误处理	需要手动捕获 `onerror` 事件	内置错误处理机制，支持 `try-catch`

示例：插入数据

IndexedDB 代码示例：

let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    let store = db.createObjectStore("users", { keyPath: "id" });
};

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(["users"], "readwrite");
    let store = transaction.objectStore("users");
    
    let user = { id: 1, name: "Alice" };
    let addRequest = store.add(user);
    
    addRequest.onsuccess = function() {
        console.log("User added successfully");
    };

    addRequest.onerror = function() {
        console.error("Error adding user");
    };
};

Dexie.js 代码示例：

import Dexie from 'dexie';

const db = new Dexie("MyDatabase");
db.version(1).stores({ users: "id, name" });

(async () => {
    await db.users.add({ id: 1, name: "Alice" });
    console.log("User added successfully");
})();

✅ Dexie.js 使用 Promise + async/await，避免嵌套回调，提高可读性。

2. 数据存储与查询

对比项	IndexedDB	Dexie.js
数据模型	键值存储，必须先打开 `objectStore`	类似 ORM，使用类似 SQL 的查询方法
查询方式	只能使用索引查询，复杂查询需手动遍历	内置查询方法，支持 `where`、`filter`、`toArray` 等
范围查询	需使用 `IDBKeyRange` 进行手动范围查询	直接使用 `.where('key').between(value1, value2)`

IndexedDB 代码示例：

let transaction = db.transaction(["users"], "readonly");
let store = transaction.objectStore("users");

let index = store.index("name");
let range = IDBKeyRange.bound("A", "Z");

let request = index.openCursor(range);
request.onsuccess = function(event) {
    let cursor = event.target.result;
    if (cursor) {
        console.log(cursor.value);
        cursor.continue();
    }
};

Dexie.js 代码示例：

let users = await db.users.where("name").between("A", "Z").toArray();
console.log(users);

✅ Dexie.js 直接提供 .where().between() 语法，大大简化查询逻辑。

3. 事务管理

对比项	IndexedDB	Dexie.js
事务类型	`readonly` 和 `readwrite`	自动处理事务
手动管理	必须显式创建 `transaction`	事务自动处理，不需要手动管理
多表事务	需要手动添加多个 `objectStore`	`db.transaction` 直接支持多表操作

IndexedDB 代码示例：

let transaction = db.transaction(["users", "orders"], "readwrite");
let userStore = transaction.objectStore("users");
let orderStore = transaction.objectStore("orders");

let userRequest = userStore.add({ id: 1, name: "Alice" });
let orderRequest = orderStore.add({ id: 101, userId: 1, product: "Laptop" });

transaction.oncomplete = function() {
    console.log("Transaction completed");
};
transaction.onerror = function() {
    console.error("Transaction failed");
};

Dexie.js 代码示例：

await db.transaction("rw", db.users, db.orders, async () => {
    await db.users.add({ id: 1, name: "Alice" });
    await db.orders.add({ id: 101, userId: 1, product: "Laptop" });
});
console.log("Transaction completed");

✅ Dexie.js 事务管理更加简洁，减少样板代码。

4. 索引管理

对比项	IndexedDB	Dexie.js
创建索引	需要手动使用 `createIndex()`	在 `.stores()` 直接定义索引
查询索引	`objectStore.index("indexName")`	直接 `.where("indexName")`

IndexedDB 代码示例：

let store = db.createObjectStore("users", { keyPath: "id" });
store.createIndex("nameIndex", "name", { unique: false });

Dexie.js 代码示例：

db.version(1).stores({
    users: "id, name"
});

✅ Dexie.js 在 .stores() 里直接定义索引，更加直观。

5. 错误处理

对比项	IndexedDB	Dexie.js
错误捕获	需要监听 `onerror` 事件	直接用 `try-catch` 处理 Promise 异常
代码简洁度	需要多个 `onerror` 监听	统一的错误处理机制

IndexedDB 代码示例：

request.onerror = function(event) {
    console.error("Error opening database", event);
};

Dexie.js 代码示例：

try {
    await db.users.add({ id: 1, name: "Alice" });
} catch (error) {
    console.error("Error adding user", error);
}

✅ Dexie.js 采用标准的 try-catch 方式，提升代码可读性。

结论：Dexie.js 如何简化 IndexedDB 开发

API 更加简洁：使用类 SQL 的查询语法 (where, filter)，无需手动管理 IDBTransaction、IDBObjectStore。
支持 Promise 和 async/await：避免了 IndexedDB 的回调嵌套，提高代码可读性。
自动管理事务：无需手动创建和处理事务，事务失败时会自动回滚。
更简单的错误处理：支持 try-catch，不需要监听多个 onerror 事件。
更直观的索引管理：可以在 .stores() 里直接定义索引，无需 createIndex()。

如果你希望在 Vue、React、Node.js 等项目中使用 IndexedDB，Dexie.js 无疑是更好的选择。

原文地址：https://blog.csdn.net/maply/article/details/145231604

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：JAVA：责任链模式（Chain of Responsibility Pattern）的技术指南
下一篇：大文件上传服务-后端V1V2

antd + VUE循环form-item的校验循环校验（多层循环）
使用a-form循环校验:v-model动态渲染的，主要是name跟v-model绑定的数据需要是一样的，校验才会生效，:name="['deviceModels',index,'paren
阅读更多2025-01-20
三十二、服务应用操作
ini文件是Initialization File 的缩写，即初始化文件，是Windows的系统配置文件所采用的存储格式。文件扩展名：配置文件名称.ini。比如项目中的配置文件是整个项目共用的。例如，
阅读更多2025-01-20
【MySQL】MySQL用户管理
MySQL中的用户，都存储在系统数据库mysql的user表中。如果用户存在，赋予权限的同时修改密码,如果该用户不存在，就是创建用户。host：表示这个用户可以从哪个主机登陆，如果是localhos
阅读更多2025-01-20
【软件测试】用例篇
【软件测试】用例篇
阅读更多2025-01-20
嵌入式知识点总结(二)-C/C++ 内存
嵌入式知识点总结(二)-C/C++内存
阅读更多2025-01-20
Spring Boot 整合 Knife4j：打造更优雅的 API 文档
在现代 Web 应用开发中，API 文档的重要性不言而喻。清晰、准确、易用的 API 文档不仅可以方便开发者理解和使用 API，还能提高团队协作效率。Knife4j 是一个基于 Swagger 的增强
阅读更多2025-01-20
linux中的docker下载镜像
重新加在文件，重启docker。
阅读更多2025-01-20
x86_64搭建ARM交叉编译工具链
>>交叉编译器中“交叉”的意思就是在一个架构上编译另外一个架构的代码，相当于两种架构“交叉”起来了。交叉编译器有很多种，我们使用Linaro出品的交叉编译器，Linaro一间非营利性质的开
阅读更多2025-01-20
elasticsearch基础
elasticsearch是一款非常强大的开源搜索引擎，具备非常多强大功能，可以帮助我们从海量数据中快速找到需要的内容例如：在github搜索代码：在电商网站搜索商品：在百度搜索答案：在打车软件搜索附
阅读更多2025-01-20
Linux中的页缓存机制
PageCache，又称pcache，中文名称为页高速缓冲存储器，简称页高缓。它是将磁盘上的数据加载到内存中，当系统需要访问这些数据时，可以直接从内存中读取，而不必每次都去读取磁盘。这种方式显著减少了
阅读更多2025-01-20

Dexie.js 与 IndexedDB 详细对比