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

相关推荐
无敌最俊朗@1 天前
01-总结
java·jvm·数据库
香香爱编程1 天前
Electron里的electron-window-state 使用
前端·javascript·vue.js·vscode·electron·前端框架
涔溪1 天前
Vue 中实现 PDF 文件上传
javascript·vue.js·pdf
think2cat1 天前
图书馆的"备份书库"与"时光机":MongoDB副本集深度揭秘
数据库·mongodb
清风6666661 天前
基于单片机的多模式智能洗衣机设计
数据库·单片机·嵌入式硬件·毕业设计·课程设计·期末大作业
牧野星辰1 天前
eslint你不懂的都在这里,不信你进来看嘛~
前端·eslint
FogLetter1 天前
设计模式奇幻漂流:从单例孤岛到工厂流水线
前端·设计模式
ohyeah1 天前
深入理解 JavaScript 数组:从创建到遍历的完整指南
前端·javascript
顾三殇1 天前
【TRAE】AI 编程:颠覆全栈开发,基于 TRAE AI 编程完成 Vue 3 + Node.js + MySQL 企业级项目实战,从环境搭建到部署上线
vue.js·ai编程·trae·ai 开发工具