Dexie.js：让浏览器数据存储变得简单的完整指南

Dexie.js：让浏览器数据存储变得简单的完整指南

【免费下载链接】Dexie.js项目地址: https://gitcode.com/gh_mirrors/dex/Dexie.js

认知：为什么选择Dexie.js

你是否曾因浏览器存储数据而头疼？Cookie容量太小，localStorage不支持复杂查询。这时，IndexedDB（浏览器内置数据库）是更好的选择，但它的API却很复杂。Dexie.js正是为解决这个问题而生，它像给IndexedDB穿上了一件"简化外衣"，让你用更少的代码实现强大的本地存储功能。

技术原理简析

想象IndexedDB是一个功能强大但操作复杂的保险箱，而Dexie.js就是保险箱的智能控制面板。它通过三层结构工作：最上层是直观的API（你直接操作的部分），中间层是事务管理系统（确保数据操作安全），最下层是IndexedDB原生接口（与浏览器交互的核心）。这种设计既保留了IndexedDB的强大功能，又大幅降低了使用难度，就像自动挡汽车一样，让你专注于驾驶而不是换挡。

核心优势速览

• 简化操作：用一行代码实现原本需要十行的IndexedDB操作
• 类型支持：完美兼容TypeScript，提供完整类型定义
• 体积轻巧：核心库仅25KB，不影响页面加载速度
• 广泛兼容：支持所有现代浏览器及IE11+

实战操作：3步完成Dexie.js基础应用

第1步：安装Dexie.js

🔍选择适合你的安装方式

方式1：npm安装（推荐）

# 在项目目录中运行 npm install dexie

方式2：直接引入（适合简单项目）

<!-- 传统脚本引入 --> <script src="https://unpkg.com/dexie@latest/dist/dexie.min.js"></script> <!-- ES模块引入（现代浏览器） --> <script type="module"> import Dexie from 'https://unpkg.com/dexie@latest/dist/modern/dexie.mjs'; </script>

💡 技巧：如果你的项目使用TypeScript，npm安装会自动包含类型定义文件，无需额外配置。

第2步：创建并配置数据库

⚠️ 注意：数据库操作必须在Dexie加载完成后执行

// 关键操作：创建数据库实例 const db = new Dexie("MyFirstDatabase"); // 关键操作：定义数据库结构（版本1） db.version(1).stores({ // 格式：表名: "主键,索引字段1,索引字段2..." // ++表示自增主键 users: "++id,name,email", tasks: "++id,userId,status" });

第3步：执行基础CRUD操作

添加数据

async function addNewUser() { try { // 关键操作：添加用户记录 const userId = await db.users.add({ name: "张三", email: "zhangsan@example.com", age: 30 }); console.log(`添加成功，用户ID：${userId}`); } catch (error) { console.error("添加失败：", error); } }

查询数据

async function findUserByName(name) { // 关键操作：按索引查询 const users = await db.users .where("name") .equals(name) .toArray(); return users; }

更新数据

async function updateUserEmail(userId, newEmail) { // 关键操作：更新记录 await db.users.update(userId, { email: newEmail }); }

删除数据

async function deleteUser(userId) { // 关键操作：删除记录 await db.users.delete(userId); }

实战小结

通过安装库、定义数据库结构、执行CRUD操作这三步，你已掌握Dexie.js的基础用法。所有操作均返回Promise，需使用async/await或.then()处理。

进阶：5个实用操作技巧

1. 使用事务确保数据一致性

💡 技巧：多表操作时使用事务，确保要么全部成功，要么全部失败

async function transferTask(userId1, userId2, taskId) { // 关键操作：创建事务 await db.transaction("rw", db.users, db.tasks, async () => { const task = await db.tasks.get(taskId); if (!task) throw new Error("任务不存在"); task.userId = userId2; await db.tasks.put(task); // 同时更新两个用户的任务计数 await db.users.update(userId1, { taskCount: db.users.taskCount - 1 }); await db.users.update(userId2, { taskCount: db.users.taskCount + 1 }); }); }

2. 高级查询与排序

async function getOverdueTasks() { return await db.tasks .where("status") .equals("pending") .and(task => task.dueDate < new Date()) .sortBy("dueDate"); // 按到期日期排序 }

3. 使用liveQuery实现数据响应式

import { liveQuery } from "dexie"; // 关键操作：创建实时查询 const activeTasks = liveQuery(() => db.tasks.where("status").equals("active").toArray() ); // 订阅数据变化 activeTasks.subscribe({ next(tasks) { console.log("活动任务更新：", tasks); // 在这里更新UI }, error(error) { console.error("查询出错：", error); } });

4. 数据库版本升级

⚠️ 注意：版本号必须递增，不能降级

// 升级到版本2 db.version(2).stores({ users: "++id,name,email,age", // 新增age索引 tasks: "++id,userId,status,dueDate", // 新增dueDate索引 notes: "++id,userId,createdAt" // 新增notes表 }).upgrade(tx => { // 关键操作：迁移现有数据 return tx.table("users").toCollection().modify(user => { user.age = user.age || 0; // 为老数据设置默认age }); });

5. 批量操作提升性能

async function batchAddUsers(users) { // 关键操作：批量添加 const userIds = await db.users.bulkAdd(users); console.log(`成功添加${userIds.length}个用户`); }

进阶小结

事务、高级查询、实时数据、版本升级和批量操作是Dexie.js提升开发效率的关键功能，掌握这些技巧能让你的本地存储应用更加强大。

开发场景拓展

场景1：离线数据缓存

在新闻阅读类应用中，你可以使用Dexie.js缓存用户已阅读的文章：

// 缓存文章数据 async function cacheArticles(articles) { const now = new Date(); // 添加缓存时间戳 const articlesWithCache = articles.map(article => ({ ...article, cachedAt: now })); await db.transaction("rw", db.articles, async () => { // 先删除一周前的旧缓存 await db.articles.where("cachedAt").below(Date.now() - 7*24*60*60*1000).delete(); // 批量添加新缓存 await db.articles.bulkAdd(articlesWithCache); }); } // 读取缓存文章 async function getCachedArticle(articleId) { return await db.articles.get(articleId); }

场景2：表单数据本地暂存

对于长表单应用，使用Dexie.js临时保存用户输入，防止意外刷新丢失数据：

// 保存表单草稿 async function saveFormDraft(formId, formData) { await db.formDrafts.put({ id: formId, data: formData, updatedAt: new Date() }); } // 恢复表单草稿 async function loadFormDraft(formId) { return await db.formDrafts.get(formId); } // 提交后清除草稿 async function clearFormDraft(formId) { await db.formDrafts.delete(formId); }

常见问题速查表

总结

Dexie.js让浏览器本地数据存储变得简单而强大。通过本文介绍的基础操作、进阶技巧和实际场景应用，你已经具备了构建本地存储应用的核心能力。开始在你的项目中尝试使用Dexie.js，体验更高效的浏览器数据管理方式吧！

【免费下载链接】Dexie.js项目地址: https://gitcode.com/gh_mirrors/dex/Dexie.js