IndexedDB数据丢失问题及有效预防技术咨询

一、针对用户主动清除数据的防护 #

• 监听浏览器关闭/刷新事件，添加备份与确认机制：在beforeunload事件中触发确认弹窗，提醒用户存在未保存的实时数据；同时借助idb库快速将核心数据写入专门的备份仓库，即便主仓库被清除，下次启动应用时可检测备份并恢复。

  window.addEventListener('beforeunload', async (e) => {
    e.preventDefault();
    // 创建备份仓库并写入关键数据
    const backupDB = await openDB('liveDataBackup', 1, {
      upgrade(db) {
        db.createObjectStore('backupStore');
      }
    });
    const latestData = await openDB('liveDB', 1).then(db => db.get('liveStore', 'primaryKey'));
    await backupDB.put('backupStore', latestData, 'backupKey');
    
    e.returnValue = '您有未保存的实时数据，确定要离开吗？';
    return e.returnValue;
  });
  

• 请求持久化存储权限：调用navigator.storage.persist()请求浏览器将当前网站的存储标记为持久化，避免浏览器因用户清理缓存、自动释放空间等操作删除IndexedDB数据。

  async function enablePersistentStorage() {
    const isPersisted = await navigator.storage.persisted();
    if (!isPersisted) {
      const permissionGranted = await navigator.storage.persist();
      permissionGranted && console.log('存储已设置为持久化');
    }
  }
  

二、针对意外故障的通用防护 #

• 事务包裹+错误重试逻辑：所有写操作必须包裹在idb的事务中，并添加重试机制，应对临时IO错误、事务中断等场景导致的写入失败。

  async function safeWriteData(dbName, storeName, key, data, maxRetries = 3) {
    let retryCount = 0;
    while (retryCount < maxRetries) {
      try {
        const db = await openDB(dbName, 1);
        const tx = db.transaction(storeName, 'readwrite');
        await tx.store.put(data, key);
        await tx.done;
        return true;
      } catch (err) {
        retryCount++;
        if (retryCount === maxRetries) throw err;
        await new Promise(resolve => setTimeout(resolve, 100 * retryCount));
      }
    }
  }
  

• 定期本地文件备份：提供手动/自动备份功能，通过idb批量读取数据后导出为JSON文件，让用户可下载保存到本地，作为终极恢复手段。

  async function exportToLocalFile() {
    const db = await openDB('liveDB', 1);
    const allData = await db.getAll('liveStore');
    const blob = new Blob([JSON.stringify(allData)], { type: 'application/json' });
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = `live-data-backup-${new Date().toISOString().slice(0,10)}.json`;
    downloadLink.click();
    URL.revokeObjectURL(downloadLink.href);
  }
  

• 数据完整性校验：为每条存储数据添加校验哈希（生产环境可使用SHA-256等安全算法），读取时校验哈希值，若发现数据损坏则从备份仓库恢复。

  function generateDataHash(data) {
    // 简单实现，生产环境建议使用crypto API生成安全哈希
    return btoa(JSON.stringify(data));
  }
  // 存储时附加哈希
  const dataWithHash = { ...data, hash: generateDataHash(data) };
  await openDB('liveDB', 1).then(db => db.put('liveStore', dataWithHash));
  // 读取时校验
  const storedData = await openDB('liveDB', 1).then(db => db.get('liveStore', 'key'));
  if (storedData.hash !== generateDataHash(storedData)) {
    const backupData = await openDB('liveDataBackup', 1).then(db => db.get('backupStore', 'backupKey'));
    await openDB('liveDB', 1).then(db => db.put('liveStore', backupData));
  }
  

三、基于idb库的优化实践 #

• 规范版本升级与数据迁移：打开数据库时通过idb的upgrade回调处理仓库结构变更，确保版本迭代时数据平滑迁移，避免因结构不兼容导致的数据丢失。

  const db = await openDB('liveDB', 2, {
    upgrade(db, oldVersion) {
      if (oldVersion < 1) {
        db.createObjectStore('liveStore', { keyPath: 'id' });
      }
      if (oldVersion < 2) {
        // 新增索引或字段时迁移现有数据
        const store = db.transaction('liveStore', 'readwrite').objectStore('liveStore');
        store.createIndex('updateTime', 'updateTime');
      }
    }
  });
  

• 批量操作减少事务开销：针对实时数据的高频写入，采用批量操作合并事务，降低事务中断的概率，提升数据写入的可靠性。

  async function batchInsertData(dataList) {
    const db = await openDB('liveDB', 1);
    const tx = db.transaction('liveStore', 'readwrite');
    dataList.forEach(data => tx.store.put(data));
    await tx.done;
  }
  

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