IndexedDB数据无法持久化：关闭浏览器后数据丢失如何解决？

问题背景 #

开发Web学习应用时使用IndexedDB实现数据增删改查，但关闭浏览器/刷新页面后数据库消失、数据全部丢失，需要实现数据持久化。

现有代码 #

数据库创建代码

let db = null;

function create_db(nameDB, stores) {
    const request = window.indexedDB.open(nameDB, 1);

    request.onerror = function(event) {
        console.log("Problem opening DB.")
    }
    request.onupgradeneeded = function(event) {
        db = event.target.result;
        const store = db.createObjectStore(stores, {keyPath: 'id'});

        store.transaction.oncomplete = function(event) {
            console.log("Persons store successfully completed;")
        }

    }
    request.onsuccess = function(event) {
        db = event.target.result;
        console.log("Successfully opened DB.")

        insert_record(nameStorePersons, persons);
    }
}

插入记录代码

function insert_record(nameStore, records) {
    if (db) {
        const insert_transaction = db.transaction(nameStore, 'readwrite');
        const store = insert_transaction.objectStore(nameStore);

        insert_transaction.onerror = function () {
            console.log("Problem with transactions.");
        }
        insert_transaction.oncomplete = function () {
            console.log("All transactions complete.");
        }

        records.forEach(record => {
            let request = store.add(record);

            request.onerror = function(event) {
                console.log("Could not add: ", record);
            }

            request.onsuccess = function(event) {
                console.log("Successfully added: ", record);
            }
        });
    }
}

数据库与数据定义

const nameOfDB = 'LocalDB';
const nameStorePersons = 'persons';

const persons = [
        {
            "id" : "d1",
            "filename" : "documents/d1.pdf",
            "status" : "Pending"
        },
        {
            "id" : "d2",
            "filename" : "documents/d2.pdf",
            "status" : "Testing"
        }]

问题原因与解决方案 #

IndexedDB本身是持久化存储，数据丢失通常由浏览器设置或代码逻辑问题导致，以下是针对性解决步骤：

1. 检查浏览器隐私配置 #

• 避免使用隐私/无痕模式：该模式下浏览器会在关闭窗口后自动清除IndexedDB数据。
• 关闭"关闭浏览器时清除数据"选项：以Chrome为例，进入设置>隐私和安全>清除浏览数据，取消勾选"关闭时清除浏览数据"，或确保IndexedDB不在清除列表中。

2. 修复重复插入逻辑 #

现有代码在每次数据库打开成功后都调用insert_record，而store.add()遇到已存在的主键会报错，虽不直接导致数据库丢失，但会干扰数据验证，且初始数据只需在首次创建仓库时插入：

request.onupgradeneeded = function(event) {
    db = event.target.result;
    const store = db.createObjectStore(stores, {keyPath: 'id'});

    store.transaction.oncomplete = function(event) {
        console.log("Persons store successfully completed;");
        // 仅在首次创建对象仓库时插入初始数据
        insert_record(nameStorePersons, persons);
    }
}

request.onsuccess = function(event) {
    db = event.target.result;
    console.log("Successfully opened DB.");
    // 移除此处的insert_record调用
}

3. 完善错误排查 #

增强错误提示，定位具体问题：

// 修改事务错误处理
insert_transaction.onerror = function (event) {
    console.error("Transaction failed:", event.target.error.message);
}

// 修改单条记录插入错误处理
request.onerror = function(event) {
    console.error("Failed to add record", record, ":", event.target.error.message);
}

4. 验证数据库持久化状态 #

页面加载时打开数据库并查询现有数据，确认数据是否真的丢失：

function open_db(nameDB) {
    const request = window.indexedDB.open(nameDB, 1);
    request.onerror = function(event) {
        console.error("Failed to open DB:", event.target.error.message);
    }
    request.onsuccess = function(event) {
        db = event.target.result;
        console.log("DB opened successfully");
        // 查询所有现有记录
        const transaction = db.transaction(nameStorePersons, 'readonly');
        const store = transaction.objectStore(nameStorePersons);
        store.getAll().onsuccess = function(e) {
            console.log("Current records in DB:", e.target.result);
        }
    }
}

// 页面加载时执行数据库打开验证
window.addEventListener('load', () => {
    open_db(nameOfDB);
});

额外注意事项 #

• 确保浏览器支持IndexedDB（现代浏览器均支持，IE10及以下除外）。
• 不要在开发者工具的Application>IndexedDB面板中手动清除数据。

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