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

相关推荐
weixin_462446232 分钟前
Python用Flask后端解析Excel图表,Vue3+ECharts前端动态还原(附全套代码)
前端·python·flask·echats
LaughingZhu2 分钟前
Product Hunt 每日热榜 | 2026-01-20
数据库·人工智能·经验分享·神经网络·搜索引擎·chatgpt
SJLoveIT5 分钟前
sql注入攻击的防御思路总结
数据库·sql
满栀5856 分钟前
jQuery 递归渲染多级树形菜单
前端·javascript·jquery
偷星星的贼118 分钟前
如何为开源Python项目做贡献?
jvm·数据库·python
闲蛋小超人笑嘻嘻9 分钟前
Flexbox 属性总结
前端·css
TOPGUS11 分钟前
谷歌将移除部分搜索功能:面对AI时代的一次功能精简策略
前端·人工智能·搜索引擎·aigc·seo·数字营销
运筹vivo@21 分钟前
攻防世界: ics-05
前端·web安全·php
成为你的宁宁21 分钟前
【Zabbix 监控 Redis 实战教程(附图文教程):从 Zabbix-Server 部署、Agent2 安装配置到自带监控模板应用全流程】
数据库·redis·zabbix
qq_3380329222 分钟前
Vue/JS项目的package.json文件 和java项目里面的pom文件
java·javascript·vue.js·json