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

相关推荐
李明卫杭州8 分钟前
Vue3 响应式概念 ↔ React 对应方案(类组件与函数组件)对照笔记
前端·vue.js·react.js
windliang11 分钟前
Claude Code 源码分析(二):CC 的心脏 queryLoop Agent主循环
前端·ai编程·claude
英勇无比的消炎药16 分钟前
拖文件进来会发生什么:TinyRobot DragOverlay 与 v-dropzone 协同指南
vue.js
Revolution6117 分钟前
reactive 对象重新赋值后,表单为什么没有恢复默认值
前端·vue.js·面试
米饭同学i18 分钟前
微信小程序 input maxlength 遇上输入法拼音被截断?这是最完整的解决方案
前端
董员外20 分钟前
RAG 系统进化论(二):Naive RAG,检索增强生成的最小闭环
前端·人工智能·后端
脾气有点小暴23 分钟前
ECharts 伪 3D 柱状图完整注释 + 实现原理说明
前端·3d·信息可视化·vue·echarts
瞬间&永恒~27 分钟前
【MySQL】 主从复制多拓扑搭建实验
运维·数据库·mysql·云原生
掘金一周38 分钟前
看看大家每月的成本有多少 | 沸点周刊 7.30
前端·人工智能·后端
han_hanker43 分钟前
sql语法 DECODE, CASE ... WHEN
数据库·sql·oracle