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

相关推荐
xqlily几秒前
SQL 数据库简介
数据库·sql
IT_陈寒11 分钟前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜26 分钟前
Git 强制推送指南:新手必读的「危险操作」解析
前端
正在走向自律27 分钟前
Java连接电科金仓数据库(KingbaseES)实战指南
java·数据库·oracle·国产数据库·kingbase
寻星探路34 分钟前
数据库造神计划第五天---增删改查(CRUD)(1)
数据库
小虾米vivian38 分钟前
达梦:将sql通过shell脚本的方式放在后台执行
服务器·数据库·sql
水无痕simon39 分钟前
1. 数据库架构演变与分库分表介绍
数据库·数据库架构
诚实可靠王大锤41 分钟前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly211 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐1 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map