Chrome浏览器中IndexedDB无法正常工作问题排查求助

这种现象的核心原因是Chrome中存在未关闭的IndexedDB连接，导致deleteDatabase请求被阻塞，而你代码里的onblocked回调是空的，没有处理这种阻塞情况。开发者工具打开时，Chrome会重置IndexedDB的相关连接状态，所以请求能正常执行。

具体原因 #

• Chrome的IndexedDB在页面未主动关闭连接时，会保持连接引用，当你调用deleteDatabase时，如果有其他活跃连接存在，请求会被阻塞并触发onblocked事件，但你的代码没有处理这个事件，导致看起来“没反应”。
• Firefox对IndexedDB连接的管理逻辑更宽松，会自动回收闲置连接，所以不会出现这个问题。
• 打开开发者工具时，Chrome会强制清理IndexedDB的残留连接，解除阻塞状态，因此deleteDatabase能成功执行。

修复方案 #

1. 处理onblocked事件：给onblocked回调添加逻辑，提示用户关闭其他标签页或主动关闭残留连接：

request.onblocked = function(event) {
    alert('请关闭其他打开此页面的标签页后重试，或刷新当前页面');
    // 尝试主动关闭已打开的数据库实例
    if (window.dbInstance) {
        window.dbInstance.close();
    }
};

2. 调用deleteDatabase前关闭所有连接：在删除数据库前，检查并关闭已打开的数据库实例：

function resetDatabase() {
    // 先关闭已有的数据库连接
    if (window.dbInstance) {
        window.dbInstance.close();
    }

    let request = indexedDB.deleteDatabase("CityDatabase4");

    request.onsuccess = function() {
        const cityVersion = 0; 
        localStorage.setItem('cityVersion', cityVersion);
        window.location.reload();
    };

    request.onerror = function(event) {
        console.error('删除数据库失败:', event.error);
    };

    request.onblocked = function(event) {
        console.warn('删除数据库被阻塞，可能存在其他活跃连接:', event);
        alert('请关闭其他相关标签页后重试');
    };
}

3. 页面卸载时自动关闭连接：在页面卸载前主动关闭数据库连接，避免残留：

window.addEventListener('beforeunload', function() {
    if (window.dbInstance) {
        window.dbInstance.close();
    }
});

另外，建议给onerror回调添加日志输出，方便排查其他潜在问题。

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