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 方法

相关推荐
TG:@yunlaoda360 云老大1 分钟前
华为云国际站代理商的ESW主要有什么作用呢?
网络·数据库·华为云
漂亮的小碎步丶13 分钟前
【8】分库分表与百亿级话单数据处理详解
数据库
404NotFound30516 分钟前
基于 Vue 3 和 Guacamole 搭建远程桌面(利用RDP去实现,去除vnc繁琐配置)
前端
咚咚咚ddd18 分钟前
AI 应用开发:Agent @在线文档功能 - 前端交互与设计
前端·aigc·agent
风月歌19 分钟前
php医院预约挂号系统小程序源代码(源码+文档+数据库)
数据库·微信小程序·小程序·毕业设计·php·源码
旧梦吟20 分钟前
脚本工具 批量md转html
前端·python·html5
ohyeah20 分钟前
React 中兄弟组件通信的最佳实践:以 Todo 应用为例
前端
xiaoyan201523 分钟前
2026最新款Vite7+Vue3+DeepSeek-V3.2+Markdown流式输出AI会话
vue.js·openai·deepseek