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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值