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

相关推荐
T^T尚几秒前
h5实现pdf预览
vue.js·pdf
Rabbit_QL2 分钟前
【前端工具链小白篇】前端工具链全景:Node、npm、Vite 各管什么
前端·npm·node.js
身如柳絮随风扬2 分钟前
前端基础进阶:Node.js + ES6 + Axios + Vue 全面入门指南
前端·node.js·es6
m0_740352424 分钟前
网页如何运行html
jvm·数据库·python
2301_775639894 分钟前
mysql大表数据清理的利器_使用表分区按天删除数据
jvm·数据库·python
dblens 数据库管理和开发工具5 分钟前
DBLens for PostgreSQL 正式发布|把 PostgreSQL 开发与管理带进 AI + Agent 时代
数据库·人工智能·postgresql
byoass5 分钟前
文件版本管理的设计与实现:解决协同编辑丢数据的核心方案
前端·javascript·网络·数据库·安全·云计算
m0_684501988 分钟前
Django 信号中为 ImageField 指定自定义保存路径的正确实践
jvm·数据库·python
2301_787312439 分钟前
Go 中自定义类型与基础类型的显式转换规则详解
jvm·数据库·python
yqcoder9 分钟前
前端性能优化基石:深入解析 CSS 雪碧图 (CSS Sprites)
前端·css·性能优化