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

相关推荐
SelectDB9 分钟前
从 Oracle、Hadoop 到 Apache Doris:哥瑞利泛半导体智能制造数据平台实践
数据库
那些年丶ny11 分钟前
颜色扩展库
前端·javascript·数据可视化
ihuyigui13 分钟前
海外签收通知短信接口
android·java·开发语言·前端·数据库·后端
海棠Flower未眠16 分钟前
SpringBoot 消息死信队列(荣耀典藏版)
java·数据库·spring boot
YWL21 分钟前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
Y38153266225 分钟前
SERP API + Redis 缓存层:4 种方案对比与选型
数据库·redis·缓存
暖和_白开水42 分钟前
数据分析agent (七):contextvars 模块上下文request_id
java·前端·数据分析
用户7783366132111 小时前
serpbase + GraphQL wrapper 实战:让 SERP 数据走 GraphQL schema
数据库·api
程序员黑豆1 小时前
鸿蒙应用开发:Flex 组件从入门到实战
前端·华为·harmonyos
大爱编程♡1 小时前
Vue3+TypeScript+element-plus的文章管理项目(配后端接口)-退出及文章管理页面
前端·javascript·typescript