indexDB vue 创建数据库 创建表 添加对象数据

1 .open(dbName,1) 版本号可以省略

javascript 复制代码
 let dbName = 'hist-data-1d'
      const request = indexedDB.open(dbName); // 如果你不知道数据库的版本号,可以省略第二个参数,这样 indexedDB 会默认为你打开最新版本的数据库,因为版本号总是自增长的

2 第一次创建表 或数据库版本变化时创建表

javascript 复制代码
// 数据库版本变化时创建表
      request.onupgradeneeded = event => {
        for (let symbol of symbolList) { //  for (let symbol in symbolList) 循环打印出来的是 symbolList 中每个元素的索引
          symbol = symbol.replace('-', '_').toLowerCase();

          const db = event.target.result;
          db.createObjectStore(symbol);
        }
      };

3 指定表 添加数据 key value

javascript 复制代码
 request.onsuccess = event => {

    const db = event.target.result;
    const transaction = db.transaction([tablie], 'readwrite');
    const objectStore = transaction.objectStore(tablie);
    
    let key = 'key'
    const request = objectStore.add(data, key);
}

4 add 是累加数据 put 是只有一条数据

javascript 复制代码
const request = objectStore.add(data, key);

ps

ps1. 如果使用 add 方法添加的数据中 key 已经存在于对象仓库中,则会抛出 ConstraintError 错误

ps2 .需要更新已经存在的数据,你应该使用 put 方法而不是 add 方法

相关推荐
悟空和大王6 分钟前
内网环境: vue3中使用 iconify 的在线图标
前端
福大大架构师每日一题6 分钟前
openclaw v2026.4.21 更新:图像生成、权限安全、插件修复、Slack 线程、浏览器与 npm 安装全面优化
前端·安全·npm
FanetheDivine7 分钟前
自定义useChat管理AI会话
前端·react.js·aigc
小赵同学WoW11 分钟前
call(), appy(),bind() 之间的区别与使用方法,自己实现这三个函数
前端
Lkstar13 分钟前
读懂 Vue 双端 Diff 算法:从源码到原理,一篇彻底搞懂
vue.js
t***54417 分钟前
如何在 Dev-C++ 中设置 MinGW 和 Clang 的路径
java·前端·c++
2301_8148098617 分钟前
如何用 cookie 的 HttpOnly 与 Secure 属性防范 XSS 攻击
jvm·数据库·python
m0_5150984220 分钟前
如何用 Object.keys 与 getOwnPropertyNames 遍历键名
jvm·数据库·python
拜托啦!狮子20 分钟前
安装EnsDb.Hsapiens.v86
java·服务器·前端
还是阿落呀21 分钟前
第三章 添加数据
数据库·mysql