Chrome下多标签IndexedDB报错：Internal error opening backing store

问题原因 #

这是Chrome浏览器在多标签/多窗口环境下的IndexedDB同步bug：当一个标签通过事务调用clear()清空store后，其他标签保持的IndexedDB连接会处于元数据不一致状态——原本的连接缓存了store的状态信息，但clear()操作没有触发跨标签的状态同步，导致后续其他标签尝试打开该store时，浏览器内部存储层无法匹配预期状态，从而抛出这个UnknownError。该问题和存储配额无关，纯属于多标签下的连接同步问题。

解决办法 #

• 监听版本变更事件自动重连：给所有标签的IndexedDB连接加上versionchange事件监听，当数据库状态发生变更（比如其他标签做了清理），浏览器会触发这个事件，此时主动关闭当前连接并重新初始化，就能同步到最新状态。示例代码：

function initDB() {
  return new Promise((resolve, reject) => {
    const dbRequest = indexedDB.open('your-db-name', 1);
    dbRequest.onsuccess = (e) => {
      const db = e.target.result;
      // 监听版本变更，自动关闭重连
      db.onversionchange = () => {
        db.close();
        initDB().then(resolve);
      };
      resolve(db);
    };
    dbRequest.onerror = reject;
  });
}

• 用版本升级替代clear()：不要直接调用store.clear()，而是通过升级数据库版本的方式清理数据。升级时删除旧store再重建，这个操作会触发所有标签的versionchange事件，强制所有连接同步状态，从根源避免不一致问题。示例：

// 触发清理时升级版本
function clearDBData() {
  return new Promise((resolve, reject) => {
    const dbName = 'your-db-name';
    const currentVersion = indexedDB.databases().then(dbs => dbs.find(db => db.name === dbName)?.version || 1);
    const newVersion = currentVersion + 1;
    const dbRequest = indexedDB.open(dbName, newVersion);
    
    dbRequest.onupgradeneeded = (e) => {
      const db = e.target.result;
      // 删除旧存储并重建
      if (db.objectStoreNames.contains('your-store-name')) {
        db.deleteObjectStore('your-store-name');
      }
      db.createObjectStore('your-store-name', { keyPath: 'id' });
    };
    
    dbRequest.onsuccess = (e) => {
      e.target.result.close();
      resolve();
    };
    dbRequest.onerror = reject;
  });
}

• 跨标签广播清理通知：执行清理操作的标签通过BroadcastChannel向其他所有标签发送通知，收到通知的标签主动关闭现有DB连接并重新初始化，手动同步状态。示例：

// 清理操作中发送通知
const clearChannel = new BroadcastChannel('db-clear-notify');
clearChannel.postMessage({ action: 'clear-completed' });

// 其他标签监听通知
const clearChannel = new BroadcastChannel('db-clear-notify');
clearChannel.onmessage = (e) => {
  if (e.data.action === 'clear-completed' && window.currentDB) {
    window.currentDB.close();
    initDB().then(db => window.currentDB = db);
  }
};

• 捕获错误后重试重连：在所有操作IndexedDB的地方捕获UnknownError，一旦检测到这个特定错误，就关闭当前连接并重新初始化DB，再重试操作。示例：

async function getStore(storeName) {
  try {
    const db = await initDB();
    return db.transaction(storeName, 'readwrite').objectStore(storeName);
  } catch (e) {
    if (e.name === 'UnknownError') {
      // 关闭旧连接，重试
      if (window.currentDB) window.currentDB.close();
      return getStore(storeName);
    }
    throw e;
  }
}

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