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 小时前
python异步函数语法解析,async with ... as ...语法解析
数据库·python·oracle
是梦终空6 小时前
计算机毕业设计266—基于Springboot+Vue3的共享单车管理系统(源代码+数据库)
数据库·spring boot·vue·课程设计·计算机毕业设计·源代码·共享单车系统
恋猫de小郭6 小时前
Flutter 正在计划提供 Packaged AI Assets 的支持,让你的包/插件可以更好被 AI 理解和选择
android·前端·flutter
小小前端--可笑可笑6 小时前
Vue / React 单页应用刷新 /login 无法访问问题分析
运维·前端·javascript·vue.js·nginx·react.js
a285286 小时前
nginx的重定向
大数据·数据库·nginx
蒂法就是我6 小时前
mysql主键索引和其他索引区别在哪里?
数据库·mysql
小林敲代码77886 小时前
记一次 Vue 项目首屏优化:从 7.1s 到 0.9s,深挖 Gzip 的力量
前端·javascript·vue.js
前端大卫7 小时前
写给年轻程序员的几点小建议
前端
eWidget7 小时前
数据可视化进阶:Seaborn 柱状图、散点图与相关性分析
数据库·python·信息可视化·kingbase·数据库平替用金仓·金仓数据库
X54先生(人文科技)7 小时前
20260211_AdviceForTraditionalProgrammers
数据库·人工智能·ai编程