Firefox下IndexedDB无法关闭，创建新object store失败求助

嘿，我来帮你搞定这两个IndexedDB的麻烦事儿！咱们先拆解问题，再一步步给你解决办法：

一、为啥db.close()后数据库还显示处于打开状态？ #

你在transaction.oncomplete里调用db.close()的思路没毛病，但Firefox对IndexedDB的连接管控有几个细节要注意：

• db.close()只是标记当前连接为关闭状态，但如果还有其他未结束的事务、或者残留的数据库实例引用，数据库实际上不会完全关闭。
• 要是之前打开过数据库但没正确释放引用，这些“幽灵连接”会让数据库一直处于打开状态。

正确的关闭姿势： #

1. 先确保所有事务都彻底完成，别在事务执行过程中调用关闭：

transaction.oncomplete = function(event) {
  console.log('事务已完全结束');
  db.close();
  // 关键：手动释放数据库实例引用，避免残留
  db = null;
};

2. 可以监听db.onclose事件，确认数据库真的关闭后再执行后续操作：

db.onclose = function(event) {
  console.log('数据库已彻底关闭');
  // 这里再去创建新的object store就不会有问题了
};

二、解决创建object store时的找不到对象错误 #

这个报错The operation failed because the requested database object could not be found，大概率是这两个原因：

1. 你在非upgradeneeded事件里创建object store：IndexedDB有严格规定，创建、删除object store必须在数据库版本升级的upgradeneeded回调里操作，普通事务里绝对不行。
2. 数据库版本没正确递增：如果之前打开过数据库，要加新的object store，必须在打开数据库时指定比当前更高的版本号。

正确创建object store的步骤： #

1. 打开数据库时指定新版本号（比如之前是1，现在改成2）：

const request = indexedDB.open('你的数据库名', 2);

2. 在upgradeneeded事件里创建新的object store，记得先检查是否已存在，避免重复创建报错：

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('新的store名称')) {
    // 根据你的需求配置keyPath或者autoIncrement
    db.createObjectStore('新的store名称', { keyPath: 'id' });
  }
};

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log('新object store创建成功！');
  // 后续操作...
  db.close();
};

三、结合两个问题的完整流程示例 #

为了确保旧数据库彻底关闭后再创建新的object store，你可以按这个流程来写：

// 第一步：先关闭旧数据库
const closeDbRequest = indexedDB.open('旧数据库名');
closeDbRequest.onsuccess = function(event) {
  const db = event.target.result;
  // 开启一个只读事务确保能触发oncomplete
  const transaction = db.transaction(db.objectStoreNames, 'readonly');
  transaction.oncomplete = function() {
    db.close();
    db = null;
    // 关闭完成后，再打开新版本数据库创建object store
    createNewObjectStore();
  };
};

// 第二步：打开新版本数据库创建object store
function createNewObjectStore() {
  const openDbRequest = indexedDB.open('旧数据库名', 2);
  openDbRequest.onupgradeneeded = function(event) {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('newStore')) {
      db.createObjectStore('newStore', { keyPath: 'id' });
    }
  };
  openDbRequest.onsuccess = function(event) {
    const db = event.target.result;
    console.log('搞定！新的object store已经创建好了');
    // 用完记得关闭
    db.close();
  };
}

针对Firefox的额外小提示 #

• Firefox对IndexedDB的连接管理比Chrome更严格，一定要及时清空全局的db变量，别留残留引用。
• 如果遇到缓存坑，可以去Firefox的开发者工具→Storage面板，找到对应数据库直接删除，或者在about:debugging里清除IndexedDB数据，再重新测试。

内容的提问来源于stack exchange，提问作者Navaneethan Arun