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

相关推荐
TDengine (老段)7 分钟前
TDengine JOIN 完整语法 — Inner/Outer/ASOF/Window 全语法详解
java·大数据·数据库·物联网·时序数据库·tdengine·涛思数据
ai_coder_ai9 分钟前
编写自动化脚本,在自己后端服务中使用云原生Baas服务进行编码和解码相关操作
数据库·云原生·自动化
云空28 分钟前
《Three.js 完整版3D魔方:带贴纸+中心固定+自动求解复原》
前端·javascript·3d·three.js
酸梅果茶30 分钟前
【7】lightning_lm项目-LIO 前端 -IVox 局部地图
前端·slam
hehelm1 小时前
AI 大模型接入 SDK —项目概述
linux·服务器·网络·数据库·c++
gis开发之家1 小时前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
Hyyy1 小时前
流式渲染的基础——SSE
前端·后端·面试
Database_Cool_1 小时前
阿里云 Lindorm vs Elasticsearch 检索存储一体对比:多模数据库一站式方案首选
数据库·阿里云
Csvn1 小时前
📐 Layout Thrashing——一个 `offsetHeight` 让你的页面卡成 PPT
前端
大郭鹏宇1 小时前
下篇:LangChain Agent 智能体从入门到实战(二)—— 记忆管理、中间件与最佳实践
网络·数据库·人工智能