前进之路 发表于 2024-8-13 15:22:17

【汇总】办理IndexedDB报Failed to execute ‘transaction‘ on ‘IDBDatab

问题发现

再学习HTML5中,有介绍到 Web 存储,当代码编写完成后,运行报错
   Failed to execute ‘transaction’ on ‘IDBDatabase’: One of the specified object stores was not found.
示例代码如下:
<!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>
问题办理

先确认对象存储空间是否已经创建,名称是否正确。
方法一:添加版本号

const request = window.indexedDB.open('myDatabase', 1);
假如版本设置为1不行,就设置为其他版本号(这是网上给出的办理方案,貌似没什么用)。
方法二:更换浏览器

默认情况下利用Chrome浏览器,然后报此问题,更换为IE浏览器或其他浏览器,问题办理。
https://i-blog.csdnimg.cn/blog_migrate/558942a226b9487c59bbb7325a40e90d.png#pic_center
方法三:利用服务器运行

再VS Code中利用Live Server插件运行html,大概利用Tomcat。
https://i-blog.csdnimg.cn/blog_migrate/24443ecaddd5a501fc753b4307654e68.png#pic_center
问题办理。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 【汇总】办理IndexedDB报Failed to execute ‘transaction‘ on ‘IDBDatab