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

相关推荐
IT_陈寒1 分钟前
JavaScript这5个隐藏技巧,90%的开发者都不知道!
前端·人工智能·后端
明月_清风1 小时前
小程序云函数:从入门到全栈的“降维打击”指南
前端·微信小程序·小程序·云开发
wuhen_n1 小时前
告别 Options API:为什么 Composition API 是逻辑复用的未来?
前端·javascript·vue.js
明月_清风1 小时前
前端异常捕获:从“页面崩了”到“精准定位”的实战架构
前端·javascript·监控
wuhen_n1 小时前
高效的数据解构:用 toRefs 和 toRef 保持响应性
前端·javascript·vue.js
小兵张健12 小时前
价值1000的 AI 工作流:Codex 通用前端协作模式
前端·aigc·ai编程
sunny_12 小时前
面试踩大坑!同一段 Node.js 代码,CJS 和 ESM 的执行顺序居然是反的?!99% 的人都答错了
前端·面试·node.js
拉不动的猪12 小时前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
数据组小组13 小时前
免费数据库管理工具深度横评:NineData 社区版、Bytebase 社区版、Archery,2026 年开发者该选哪个?
数据库·测试·数据库管理工具·数据复制·迁移工具·ninedata社区版·naivicat平替
ayqy贾杰14 小时前
Agent First Engineering
前端·vue.js·面试