如何在版本升级时使用localforage.js清除IndexedDB数据？

我之前做项目时也碰到过一模一样的问题——localforage的version配置只会触发数据库版本号变更，但完全不会帮你处理旧数据的清理或者结构迁移，这就导致新旧数据混在一起，结构不一致直接崩应用。下面几个方案亲测有效，你可以根据自己的场景选：

方案一：手动检查版本并全量清理 #

这个方案最简单直接，适合不需要保留任何旧数据的场景。我们自己维护一个版本标记，初始化时对比当前版本和预期版本，不一致就清空所有数据并更新版本标记：

// 预期的数据库版本号
const TARGET_VERSION = 2;

async function runMigration() {
  const currentStoredVersion = await localforage.getItem('db_version');
  
  // 如果版本不匹配，清空旧数据
  if (currentStoredVersion !== TARGET_VERSION) {
    await localforage.clear();
    // 记录新版本号
    await localforage.setItem('db_version', TARGET_VERSION);
  }
}

// 在应用最开始的地方执行迁移
runMigration().then(() => {
  // 这里启动你的应用逻辑
  console.log('数据库迁移完成，可以正常使用localforage了');
});

方案二：结合原生IndexedDB处理版本升级 #

既然localforage底层依赖IndexedDB，那我们可以先手动用原生API打开数据库，在onupgradeneeded里处理旧仓库的删除/修改，之后再初始化localforage。这样就能精准控制数据结构的变更：

const DB_NAME = 'your_app_db';
const TARGET_VERSION = 2;
const NEW_STORE_NAME = 'app_cache_v2';

function initDBWithMigration() {
  return new Promise((resolve, reject) => {
    const dbRequest = indexedDB.open(DB_NAME, TARGET_VERSION);

    dbRequest.onupgradeneeded = (event) => {
      const db = event.target.result;
      
      // 删除旧的对象仓库（如果存在）
      if (db.objectStoreNames.contains('app_cache_v1')) {
        db.deleteObjectStore('app_cache_v1');
      }
      
      // 创建符合新结构的对象仓库
      db.createObjectStore(NEW_STORE_NAME, { keyPath: 'uniqueId' });
    };

    dbRequest.onsuccess = () => {
      // 关闭原生连接，交给localforage处理
      dbRequest.result.close();
      
      // 初始化localforage，指向新的仓库
      localforage.config({
        name: DB_NAME,
        version: TARGET_VERSION,
        storeName: NEW_STORE_NAME
      });
      
      resolve();
    };

    dbRequest.onerror = (err) => {
      reject(`数据库初始化失败：${err.target.error}`);
    };
  });
}

// 先完成迁移再启动应用
initDBWithMigration().then(() => {
  // 开始使用localforage进行数据操作
});

方案三：切换新的仓库名称（无感知迁移） #

如果不想在启动时阻塞用户操作，可以直接给新数据用一个全新的storeName，让localforage自动创建新仓库，旧数据暂时留在原地，之后再异步清理：

// 初始化localforage时使用新的仓库名
localforage.config({
  name: 'your_app_db',
  version: 2,
  storeName: 'app_cache_v2' // 和旧版本的storeName区分开
});

// 后台异步清理旧仓库，不影响主线程
async function cleanUpOldStore() {
  const dbRequest = indexedDB.open('your_app_db');
  dbRequest.onsuccess = (event) => {
    const db = event.target.result;
    if (db.objectStoreNames.contains('app_cache_v1')) {
      db.deleteObjectStore('app_cache_v1');
    }
    db.close();
  };
}

// 应用启动后延迟执行清理，避免占用启动资源
setTimeout(cleanUpOldStore, 1500);

选择建议 #

• 如果旧数据完全没用，直接用方案一，简单粗暴；
• 需要精细控制数据结构（比如只删部分旧仓库），选方案二；
• 想优先保证应用启动速度，不阻塞用户，用方案三。

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