IndexedDB数据库onupgradeneeded事件为何只在首次创建时触发？-html教程-PHP中文网

IndexedDB数据库onupgradeneeded事件为何只在首次创建时触发？

心靈之曲

发布： 2025-02-19 22:06:01

原创

1171人浏览过

indexeddb数据库的onupgradeneeded事件为何只在首次创建时触发？

IndexedDB数据库onupgradeneeded事件为何只在首次创建时触发？

问题：onupgradeneeded事件仅在数据库首次创建时触发

在使用IndexedDB时，我们可能会遇到onupgradeneeded事件只在数据库第一次创建时触发的情况。当我们尝试通过提高数据库版本来触发该事件更新数据库结构时，它却无法如预期般工作。

代码示例及问题分析

以下代码片段演示了这个问题：

<code class="javascript">var req = window.indexedDB.open("demoIndexDB", 3);

req.onupgradeneeded = function() {
    console.log("数据库升级：" + Date.now());
};

// 重新打开数据库，尝试触发onupgradeneeded
document.getElementById("dbBtn").addEventListener("click", function() {
    window.indexedDB.open("demoIndexDB", 4);
});</code>

登录后复制

点击按钮后，数据库版本虽然提升至4，但onupgradeneeded事件并没有被再次触发。这是因为每次调用window.indexedDB.open()都会创建一个新的IDBOpenDBRequest对象，而事件监听器req.onupgradeneeded只绑定在第一次创建的请求对象上。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

解决方案：封装函数并正确注册事件监听器

为了解决这个问题，我们需要将数据库打开和升级操作封装在一个函数中，并确保onupgradeneeded事件监听器正确地注册到每个IDBOpenDBRequest对象上。

<code class="javascript">function openAndUpgradeDB(dbName, version, onsuccess, onerror) {
  const req = window.indexedDB.open(dbName, version);

  req.onupgradeneeded = function(event) {
    console.log("数据库升级：" + Date.now());
    // 在这里执行数据库结构更新操作
    const db = event.target.result;
    // ...  你的数据库结构更新代码 ...
  };

  req.onsuccess = onsuccess || function(event) {
    console.log("数据库打开成功：" + Date.now());
    // 数据库打开成功后的操作
  };

  req.onerror = onerror || function(event) {
    console.error("数据库打开失败：" + event.target.error);
  };
}

// 使用封装函数打开数据库
openAndUpgradeDB("demoIndexDB", 4, null, null); //版本号改为4</code>

登录后复制

现在，每次调用openAndUpgradeDB函数，都会创建一个新的IDBOpenDBRequest对象，并在其上注册onupgradeneeded事件监听器。当版本号变化时，onupgradeneeded事件将被正确触发，从而实现数据库的升级。代码中也添加了onsuccess和onerror回调函数处理成功和失败的情况，使代码更健壮。记得在onupgradeneeded事件处理函数中添加你的数据库结构更新代码。

以上就是IndexedDB数据库onupgradeneeded事件为何只在首次创建时触发？的详细内容，更多请关注php中文网其它相关文章！