点击按钮删除重建IndexedDB数据库多次后失效问题求助

你的问题核心在于没有等待数据库删除操作完成就立刻执行创建/连接操作，而且重复点击会触发大量并发的IndexedDB操作，这会打乱IndexedDB的内部状态管理，导致锁冲突、数据库文件损坏，最终出现卡顿和操作失败。

IndexedDB的所有操作都是异步的，deleteDatabase不会立刻完成，如果你在它的onsuccess回调之前就调用open，新旧操作会互相干扰；重复点击更是会让多个删库、建库请求同时竞争，直接搞崩数据库连接。

修复方案： #

1. 严格保证操作顺序：必须等deleteDatabase成功（或处理完错误）后，再执行数据库的创建和连接逻辑。
2. 防止重复触发：点击按钮后立即禁用，直到整个重置流程完成再恢复，避免多次并发操作。
3. 合并重复的open调用：不要同时发起多个open请求，复用同一个请求的结果即可。

修改后的完整代码示例： #

let db;
const resetBtn = document.getElementById('你的按钮ID'); // 替换成实际按钮ID

// 封装数据库重置逻辑
function resetDatabase() {
  // 禁用按钮，防止重复点击
  resetBtn.disabled = true;

  // 1. 删除数据库
  const deleteReq = indexedDB.deleteDatabase("AdminDatabase");
  
  deleteReq.onsuccess = () => {
    console.log("数据库删除成功");
    // 删除成功后，创建并连接数据库
    createAndConnectDatabase();
  };

  deleteReq.onerror = (event) => {
    console.error("删除数据库失败:", event.target.error);
    // 处理删除失败（比如数据库正被占用），恢复按钮状态
    resetBtn.disabled = false;
  };

  deleteReq.onblocked = () => {
    console.warn("删除操作被阻止：数据库仍有活跃连接");
    // 提示用户关闭其他标签页或刷新页面
    alert("请关闭其他打开此页面的标签页，或刷新后重试");
    resetBtn.disabled = false;
  };
}

// 创建并连接数据库的逻辑
function createAndConnectDatabase() {
  const request = window.indexedDB.open("AdminDatabase", 3);

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

    if (event.oldVersion < 1) {
      db.createObjectStore("floors", { keyPath: "id", autoIncrement: true });
    }

    if (event.oldVersion < 2) {
      db.createObjectStore("rooms", { keyPath: "id", autoIncrement: true });
    }

    if (event.oldVersion < 3) {
      const objectStore = db.createObjectStore("components", { keyPath: "id", autoIncrement: true });
      objectStore.createIndex('componentFloorId_componentRoomId', ['componentFloorId', 'componentRoomId']);
    }
  };

  request.onsuccess = (event) => {
    db = event.target.result;
    console.log("数据库连接成功");
    
    // 这里执行你的事务逻辑
    // ...

    // 重置完成，恢复按钮状态
    resetBtn.disabled = false;
  };

  request.onerror = (event) => {
    console.error("数据库创建/连接失败:", event.target.error);
    resetBtn.disabled = false;
  };
}

// 绑定按钮点击事件
resetBtn.addEventListener('click', resetDatabase);

关键修改说明： #

• 异步流程串联：把删库、建库、连接的逻辑拆成函数，只有前一步成功才执行下一步，避免操作冲突。
• 按钮状态控制：点击后禁用按钮，彻底避免重复触发的问题。
• 处理onblocked事件：当数据库有活跃连接时（比如其他标签页打开着），删库操作会被阻止，这里加了提示逻辑，引导用户解决。
• 合并open请求：不再发起多个open，而是在删库成功后只发起一次，复用其结果。

这样修改后，不管点击多少次按钮，都会排队执行，不会出现并发操作导致的数据库损坏问题。

内容的提问来源于stack exchange，提问作者Ozgur Baykal