【汇总】解决IndexedDB报Failed to execute ‘transaction‘ on ‘IDBDatabase‘

问题发现

再学习HTML5 中,有介绍到 Web 存储,当代码编写完成后,运行报错

Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

示例代码如下:

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <button onclick="addData()">添加数据</button>
  <button onclick="getData()">获取数据</button>
  <script>
    // 打开或创建数据库
    const request = window.indexedDB.open('myDatabase', 1);

    request.onupgradeneeded = function(event) {
      const db = event.target.result;

      // 创建一个对象存储空间
      const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

      // 创建索引,可提高检索性能
      objectStore.createIndex('name', 'name', { unique: false });
    };

    request.onsuccess = function(event) {
      const db = event.target.result;

      function addData() {
        // 开启事务
        const transaction = db.transaction(['myObjectStore'], 'readwrite');
        const objectStore = transaction.objectStore('myObjectStore');

        const data = { id: 1, name: 'John Doe', age: 30 };

        // 添加数据
        const request = objectStore.add(data);

        request.onsuccess = function() {
          console.log('数据添加成功');
        };

        transaction.oncomplete = function() {
          console.log('事务完成');
        };

        transaction.onerror = function(event) {
          console.log('事务错误:', event.target.error);
        };
      }

      function getData() {
        // 开启只读事务
        const transaction = db.transaction(['myObjectStore'], 'readonly');
        const objectStore = transaction.objectStore('myObjectStore');

        // 检索数据
        const request = objectStore.get(1);

        request.onsuccess = function(event) {
          const data = event.target.result;

          if (data) {
            console.log('检索到的数据:', data);
          } else {
            console.log('未找到该数据');
          }
        };

        transaction.oncomplete = function() {
          console.log('事务完成');
        };

        transaction.onerror = function(event) {
          console.log('事务错误:', event.target.error);
        };
      }

      window.addData = addData;
      window.getData = getData;
    };

    request.onerror = function(event) {
      console.log('打开数据库失败:', event.target.error);
    };
  </script>
</body>
</html>

问题解决

先确认对象存储空间是否已经创建,名称是否正确。

方法一:添加版本号

javascript 复制代码
const request = window.indexedDB.open('myDatabase', 1);

如果版本设置为1不行,就设置为其他版本号(这是网上给出的解决方案,貌似没什么用)。

方法二:更换浏览器

默认情况下使用Chrome 浏览器,然后报此问题,更换为IE浏览器或其他浏览器,问题解决。

方法三:使用服务器运行

VS Code 中使用Live Server 插件运行html ,或者使用Tomcat

问题解决。

相关推荐
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
前端康师傅1 天前
JavaScript 作用域
前端·javascript
云枫晖1 天前
JS核心知识-事件循环
前端·javascript
eason_fan1 天前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
前端付豪1 天前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮1 天前
js符号(Symbol)
前端·javascript