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

问题发现

再学习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浏览器或其他浏览器,问题解决。

在这里插入图片描述

方法三:使用服务器运行

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

在这里插入图片描述

问题解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/472989.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迷失在前端框架中的初级开发者,总觉得大厦要从二层开始建

知乎有人提问&#xff1a;现在是框架主导前端时代&#xff0c;还有必要学习Html&#xff0c;CSS和JavaScript吗&#xff1f;我看很愕然&#xff0c;框架可以节省力气&#xff0c;难道都可以替代前端基础了吗&#xff1f; 一、起因 因为贝格前端工场的主营业务就是前端开发&…

Linux桌面

系统信息的截图 登录界面右下角可以切换 Ubuntu on Wayland &#xff0c;虽然还是测试版&#xff0c;不过体验已经比之前的 Xorg 好多了&#xff0c;最笔记本上使用最影响体验的高分屏适配功能&#xff0c;在 wayland 中也是几乎完美支持的。 卸载 snap 这个 snap 是 Ubuntu …

TIM(Timer)定时中断 P1

难点&#xff1a;定时器级联、主从模式 一、简介&#xff1a; 1.TIM&#xff08;Timer&#xff09;定时器 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断 补充&#xff1a; { 定时器本质上是一个计数器&#xff0c;可以工作在定时或计数模式&…

⭐北邮复试刷题429. N 叉树的层序遍历(按层入队出队BFS)

429. N 叉树的层序遍历 给定一个 N 叉树&#xff0c;返回其节点值的层序遍历。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;。 树的序列化输入是用层序遍历&#xff0c;每组子节点都由 null 值分隔&#xff08;参见示例&#xff09;。 示例 1&#xff1a;输入&a…

[]人的成功离不开气运这么一说!

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

.NET Core MongoDB数据仓储和工作单元模式封装

前言 上一章我们把系统所需要的MongoDB集合设计好了&#xff0c;这一章我们的主要任务是使用.NET Core应用程序连接MongoDB并且封装MongoDB数据仓储和工作单元模式&#xff0c;因为本章内容涵盖的有点多关于仓储和工作单元的使用就放到下一章节中讲解了。仓储模式&#xff08;R…

开源数据可视化应用程序JSON Crack

什么是 JSON Crack &#xff1f; JSON Crack 是一款免费的开源数据可视化应用程序&#xff0c;能够将 JSON、YAML、XML、CSV 等数据格式可视化为交互式图表。凭借其直观且用户友好的界面&#xff0c;JSON Crack 可以轻松探索、分析和理解即使是最复杂的数据结构。无论您是从事大…

【Chrono Engine学习总结】5-sensor-5.2-导出lidar数据的方法与原理探究

由于Chrono的官方教程在一些细节方面解释的并不清楚&#xff0c;自己做了一些尝试&#xff0c;做学习总结。 1、Sensor数据生成流程回顾 Chrono里面&#xff0c;sensor的数据生成、可视化、以及保存&#xff0c;都需要单独进行设置才能实现。sensor数据的采集流程如下https:/…

17.3.1.6 自定义处理

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 模拟某款图像处理软件的处理&#xff0c;它只留下红色、绿色或者蓝色这样的单一颜色。 首先按照颜色划分了6个色系&#xff0c;分别…

P2P 应用

P2P 工作方式概述 在 P2P 工作方式下&#xff0c;所有的音频/视频文件都是在普通的互联网用户之间传输。 1 具有集中目录服务器的 P2P 工作方式 Napster 最早使用 P2P 技术&#xff0c;提供免费下载 MP3 音乐。 Napster 将所有音乐文件的索引信息都集中存放在 Napster 目录服…

《白话C++》第10章 STL和boost,Page67 std::auto_ptr

std::auto_ptr可以不经意间转移裸指针控制权 std::auto_ptr持有裸指针的控制权&#xff0c;却可以随随便便看似不经意地转移给另一个auto_ptr: #include <iostream> #include <memory>using namespace std;struct S {int a;void SetA(int a){this->a a;}~S()…

爱上JVM——常见问题(一):JVM组成

1 JVM组成 1.1 JVM由那些部分组成&#xff0c;运行流程是什么&#xff1f; 难易程度&#xff1a;☆☆☆ 出现频率&#xff1a;☆☆☆☆ JVM是什么 Java Virtual Machine Java程序的运行环境&#xff08;java二进制字节码的运行环境&#xff09; 好处&#xff1a; 一次编写&…