nodejs33: react中的IndexedDB 原有API+操作库idb+数据库事务

• 在 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