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

打印 上一主题 下一主题

主题 835|帖子 835|积分 2505

问题发现

再学习HTML5中,有介绍到 Web 存储,当代码编写完成后,运行报错
   Failed to execute ‘transaction’ on ‘IDBDatabase’: One of the specified object stores was not found.
  示例代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>网页标题</title>
  5. </head>
  6. <body>
  7.   <button onclick="addData()">添加数据</button>
  8.   <button onclick="getData()">获取数据</button>
  9.   <script>
  10.     // 打开或创建数据库
  11.     const request = window.indexedDB.open('myDatabase', 1);
  12.     request.onupgradeneeded = function(event) {
  13.       const db = event.target.result;
  14.       // 创建一个对象存储空间
  15.       const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
  16.       // 创建索引,可提高检索性能
  17.       objectStore.createIndex('name', 'name', { unique: false });
  18.     };
  19.     request.onsuccess = function(event) {
  20.       const db = event.target.result;
  21.       function addData() {
  22.         // 开启事务
  23.         const transaction = db.transaction(['myObjectStore'], 'readwrite');
  24.         const objectStore = transaction.objectStore('myObjectStore');
  25.         const data = { id: 1, name: 'John Doe', age: 30 };
  26.         // 添加数据
  27.         const request = objectStore.add(data);
  28.         request.onsuccess = function() {
  29.           console.log('数据添加成功');
  30.         };
  31.         transaction.oncomplete = function() {
  32.           console.log('事务完成');
  33.         };
  34.         transaction.onerror = function(event) {
  35.           console.log('事务错误:', event.target.error);
  36.         };
  37.       }
  38.       function getData() {
  39.         // 开启只读事务
  40.         const transaction = db.transaction(['myObjectStore'], 'readonly');
  41.         const objectStore = transaction.objectStore('myObjectStore');
  42.         // 检索数据
  43.         const request = objectStore.get(1);
  44.         request.onsuccess = function(event) {
  45.           const data = event.target.result;
  46.           if (data) {
  47.             console.log('检索到的数据:', data);
  48.           } else {
  49.             console.log('未找到该数据');
  50.           }
  51.         };
  52.         transaction.oncomplete = function() {
  53.           console.log('事务完成');
  54.         };
  55.         transaction.onerror = function(event) {
  56.           console.log('事务错误:', event.target.error);
  57.         };
  58.       }
  59.       window.addData = addData;
  60.       window.getData = getData;
  61.     };
  62.     request.onerror = function(event) {
  63.       console.log('打开数据库失败:', event.target.error);
  64.     };
  65.   </script>
  66. </body>
  67. </html>
复制代码
问题办理

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

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

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

方法三:利用服务器运行

VS Code中利用Live Server插件运行html,大概利用Tomcat

问题办理。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

前进之路

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表