为什么前端也需要备份策略随着PWA与离线应用普及IndexedDB已成为前端存储大量结构化数据的首选。但用户清缓存、浏览器更新或误操作都可能让数据瞬间蒸发。与其等故障发生再救火不如提前建立一套可落地的备份与恢复机制。方案一JSON文件导出/导入最通用原因JSON格式跨平台、可读性好适合手动备份或迁移到其他浏览器。步骤遍历所有数据库及对象仓库object store将每个仓库的游标数据收集为数组构造导出对象并触发下载async function exportAllData() { const dbNames await indexedDB.databases(); const exportData {}; for (const {name} of dbNames) { const db await openDB(name); const tx db.transaction(db.objectStoreNames, readonly); exportData[name] {}; for (const storeName of db.objectStoreNames) { const all await tx.objectStore(storeName).getAll(); exportData[name][storeName] all; } } const blob new Blob([JSON.stringify(exportData)], {type: application/json}); const a document.createElement(a); a.href URL.createObjectURL(blob); a.download idb-backup-${Date.now()}.json; a.click(); }恢复读取JSON文件按数据库名打开无则创建然后批量put数据。方案二导出为CSV适合表格型数据原因Excel/WPS可直接打开便于业务人员查看或二次处理。注意事项CSV无法表达嵌套对象需先扁平化。function toCSV(rows) { if (!rows.length) return ; const keys Object.keys(rows[0]); const header keys.join(,); const body rows.map(r keys.map(k JSON.stringify(r[k] ?? )).join(,)); return [header, ...body].join(\n); } // 导出单个store为CSV async function exportStoreToCSV(dbName, storeName) { const db await openDB(dbName); const rows await db.transaction(storeName).objectStore(storeName).getAll(); const csv toCSV(rows); // 触发下载同方案一 }方案三浏览器快照利用Storage API原因Chrome 125支持navigator.storage.persist()和配额管理但无法直接快照IndexedDB。替代方案是用导出到文件系统访问APIFile System Access让用户选择目录保存多个文件。// 使用showDirectoryPicker保存多个JSON文件 async function backupToFolder() { const dirHandle await window.showDirectoryPicker(); const dbNames await indexedDB.databases(); for (const {name} of dbNames) { const fileHandle await dirHandle.getFileHandle(${name}.json, {create: true}); const writable await fileHandle.createWritable(); await writable.write(JSON.stringify(await exportDB(name))); await writable.close(); } }恢复操作的核心原则版本控制恢复前先读取数据库版本号若版本冲突需先删除旧库再重建indexedDB.deleteDatabase幂等性使用put()而非add()避免主键冲突报错事务边界大批量写入时使用单事务失败则回滚保证原子性async function restoreFromJSON(json) { for (const [dbName, stores] of Object.entries(json)) { await new Promise((res, rej) { const req indexedDB.deleteDatabase(dbName); req.onsuccess res; req.onerror rej; }); const db await openDB(dbName, undefined, {upgrade: (up) { Object.keys(stores).forEach(s up.createObjectStore(s)); }}); const tx db.transaction(Object.keys(stores), readwrite); Object.entries(stores).forEach(([s, rows]) { const store tx.objectStore(s); rows.forEach(r store.put(r)); }); await tx.done; } }自动化与监控手动备份易遗忘建议结合定期提醒如localStorage记录上次备份时间或利用Service Worker在空闲时段自动导出。同时监听visibilitychange事件在页面隐藏时若数据有变更则触发一次轻量备份。最后务必在控制台测试恢复流程清空IndexedDB后导入备份验证数据完整性。将备份文件放入Git仓库私有也是防丢失的好习惯。