- 在 React 中使用 IndexedDB 作为本地数据库存储可以有效地管理大量的数据,比如缓存、离线功能或状态持久化。可以通过索引进行快速查询,支持事务处理,并且异步操作。
特点:
-
存储键值对。
-
支持事务。
-
数据可以分层组织为数据库、对象存储(Object Stores)和索引(Indexes)。
-
原生IndexedDB API更灵活,但代码较为复杂。 如果需要在项目中频繁操作 IndexedDB,
idb
是一个轻量但功能强大的选择;如果需要更复杂的查询和事务管理,Dexie
(npm install dexie) 会更适合。
原生IndexedDB的upgradeneeded 事件 & blocked事件
- upgradeneeded 事件的核心作用是帮助你在数据库版本更新时进行结构调整。你可以利用这个事件来:
- 迁移数据:从旧版本的数据库结构迁移到新结构。
- 添加新的存储结构或索引:根据应用的需求,添加新的对象存储或索引,以支持新的功能。
- 清理旧数据:删除过时的对象存储,移除不再需要的数据结构。
- 如果在升级数据库时,另一个实例(如其他浏览器标签页)仍在使用该数据库并且没有关闭,它会阻止当前数据库的打开,导致
blocked
事件被触发。你可以通过监听这个事件来处理这种情况。
示例代码
- 以下代码演示了如何在 IndexedDB 中处理数据库的版本升级过程,包括创建对象存储和索引。它还模拟了打开更高版本的数据库时,如何处理请求被阻塞的情况。
// https://developer.mozilla.org/en-US/docs/Web/API/IDBOpenDBRequest/blocked_event
// 打开数据库,指定数据库名称为 "toDoList",版本号为 4
const DBOpenRequest = window.indexedDB.open("toDoList", 4);
// 当数据库版本需要升级时,触发 onupgradeneeded 事件
DBOpenRequest.onupgradeneeded = (event) => {
const db = event.target.result; // 获取数据库实例
// 如果在创建数据库时发生错误,处理错误并打印错误信息
db.onerror = () => {
console.log("Error creating database");
};
// 在数据库中创建一个名为 "toDoList" 的对象存储(Object Store),以 "taskTitle" 作为主键(keyPath)
const objectStore = db.createObjectStore("toDoList", {
keyPath: "taskTitle", // 任务的标题作为每个数据项的唯一标识符
});
// 在 "toDoList" 对象存储中创建多个索引,分别用于按不同字段排序
objectStore.createIndex("hours", "hours", {
unique: false }); // 按小时排序
objectStore.createIndex("minutes", "minutes", {
unique: false }); // 按分钟排序
objectStore.createIndex("day", "day", {
unique: false }); // 按天排序
objectStore.createIndex("month", "month", {
unique