IndexedDB达到存储容量上限时无法删除ObjectStore问题求助

问题根因 #

你遇到的OpenBackingStore报错本质是IndexedDB的存储空间回收是异步操作导致的：

• 你调用store.clear()触发onsuccess仅代表清除操作的指令被IndexedDB接收完成，浏览器底层真正把这部分空间释放、归还给域名的存储配额还需要等待后台垃圾回收执行，这个过程耗时不固定，1秒的硬等待完全不可靠
• 配额还没释放的情况下你触发indexedDB.open升级版本，浏览器打开数据库时需要预留少量空间写入元数据（版本号、ObjectStore元信息等），此时存储配额仍然处于满额状态，就会抛出和写入时一样的配额超限错误
• 额外说明：你先清空再删除ObjectStore的逻辑完全是多余操作，deleteObjectStore执行时会自动回收该ObjectStore占用的全部空间，不需要提前clear。

修复方案 #

核心优化点 #

1. 删掉不可靠的1秒硬等待，替换为通过navigator.storage.estimate()主动检测存储空间是否完成回收
2. 不要手动维护全局db_version，打开数据库前先查询当前实际版本号，避免版本号冲突导致升级流程不触发
3. 删除ObjectStore前先判断是否存在，避免异常抛出
4. 提前释放现有数据库连接的所有挂起事务，避免阻塞版本升级

修改后的可运行代码 #

var db; 
var db_open; 

delete_active_holding_folder("the_store_name", function() {
    console.log("all done");
});

function delete_active_holding_folder(store_name, _callback) {
    // 不需要提前清空store，删store操作会自动回收空间
    destroy_holding_store(store_name, _callback);
}

function getObjectStore(store_name, mode) {
    try {
        var tx = db.transaction(store_name, mode);
        return tx.objectStore(store_name);
    }
    catch(evt) {
        return false;
    }
}

// 轮询检测存储空间是否释放
function waitForQuotaRelease(callback, retryCount = 0) {
    // 最多重试10次，每次间隔300ms
    if (retryCount > 10) return callback();
    navigator.storage.estimate().then(estimate => {
        const available = estimate.quota - estimate.usage;
        // 只要有1MB以上可用空间就足够执行元数据写入
        if (available > 1024 * 1024) {
            return callback();
        }
        setTimeout(() => waitForQuotaRelease(callback, retryCount + 1), 300);
    }).catch(() => {
        // 部分老旧浏览器不支持storage estimate API，直接降级等待1.5秒
        setTimeout(callback, 1500);
    });
}

function destroy_holding_store(store_name, _callback) {
    // 关闭现有连接前先清空所有挂起事务
    if(db_open) {
        db.close();
        db_open = false;
    }

    // 先等配额释放完成再开库升级
    waitForQuotaRelease(() => {
        // 先查当前数据库的实际版本号，不要用全局维护的版本
        const getVerReq = indexedDB.open('holdings');
        getVerReq.onsuccess = (evt) => {
            const currentVer = evt.target.result.version;
            evt.target.result.close();
            
            // 用实际版本号+1触发升级
            const upgradeReq = indexedDB.open('holdings', currentVer + 1);

            upgradeReq.onupgradeneeded = function(evt) {
                const upgradeDb = evt.target.result;
                // 先判断store是否存在再删除
                if (upgradeDb.objectStoreNames.contains(store_name)) {
                    upgradeDb.deleteObjectStore(store_name);
                }
                db = upgradeDb;
                db_open = true;
            };

            upgradeReq.onsuccess = function(evt) {
                console.log("store successfully destroyed");
                evt.target.result.close();
                db_open = false;
                _callback("success");
            }

            upgradeReq.onerror = function(evt) {
                console.log("destroy store error:", evt.target.error);
                _callback("fail");
            }

            // 处理版本升级被其他连接阻塞的情况
            upgradeReq.onblocked = function(evt) {
                console.log("upgrade blocked, please close other tabs");
            }
        };
        getVerReq.onerror = (evt) => {
            console.log("get db version error:", evt.target.error);
            _callback("fail");
        }
    });
}

兼容提示 #

如果你的应用需要兼容不支持navigator.storageAPI的老旧浏览器，可直接移除配额检测逻辑，降级为等待1.5秒再执行升级，比原1秒等待的容错性更高，大部分场景下都能等到底层空间回收完成。

内容的提问来源于stack exchange，提问作者Helen Danger Burns