IndexedDB动态新增对象存储时如何正确实现版本控制

IndexedDB 有明确的机制限制：对象存储（Object Store）只能在onupgradeneeded回调中创建/修改，而这个回调只会在调用indexedDB.open()时传入的版本号，高于浏览器本地存储的当前数据库版本时才会触发。
你现有代码把版本号硬编码为1：

• 第一次传入ID打开数据库时，本地无对应库，初始版本为0，传入版本1高于0，触发onupgradeneeded创建第一个ID对应的store，流程正常
• 后续传入新ID打开时，本地数据库版本已经是1，你传入的版本号还是1，不会触发升级回调，检测到新ID对应的store不存在时只能抛出错误，手动改版本号为2本质是强制触发升级流程，才会创建新的store

不需要手动维护版本号，按以下流程自动处理即可：

• 首次调用open时不传版本参数，直接打开现有数据库，拿到当前真实版本号、已存在的store列表
• 检查当前业务ID对应的store是否存在
• 如果store已存在，直接返回数据库实例供业务调用
• 如果store不存在，关闭当前打开的数据库实例，将版本号+1后重新调用open传入新版本号，在onupgradeneeded回调中创建缺失的store
• 加版本冲突处理：当其他页面/标签页正在占用数据库执行升级时，监听versionchange事件主动关闭旧连接，避免阻塞升级

首先重写通用的数据库初始化方法，替代原来的createIndexDB：

// 全局缓存数据库实例，避免重复开库
let cachedDB = null;

const getDB = async (ID) => {
  // 有缓存直接返回
  if (cachedDB) return { db: cachedDB, isNewStore: false };
  const targetStoreName = `myindexDB${ID}`;

  // 第一步：不带版本号打开，拿当前数据库状态
  const initialOpen = await new Promise((resolve, reject) => {
    const req = indexedDB.open('myindexDB');
    req.onerror = () => reject(req.error);
    req.onsuccess = () => resolve(req.result);
  });

  // 检查目标store是否存在
  if (initialOpen.objectStoreNames.contains(targetStoreName)) {
    cachedDB = initialOpen;
    // 监听版本变更，其他页面要升级时主动关闭连接
    cachedDB.onversionchange = () => cachedDB.close();
    return { db: cachedDB, isNewStore: false };
  }

  // store不存在，需要升级：拿当前版本+1作为新版本号
  const currentVersion = initialOpen.version;
  initialOpen.close(); // 必须先关闭旧连接才能开新版本
  const newVersion = currentVersion + 1;

  // 第二步：带新版本号打开，触发升级流程创建store
  const upgradedDB = await new Promise((resolve, reject) => {
    const req = indexedDB.open('myindexDB', newVersion);
    req.onerror = () => reject(req.error);
    req.onupgradeneeded = () => {
      const db = req.result;
      if (!db.objectStoreNames.contains(targetStoreName)) {
        db.createObjectStore(targetStoreName, { keyPath: 'itemid', autoIncrement: true });
      }
    };
    req.onsuccess = () => resolve(req.result);
  });

  cachedDB = upgradedDB;
  cachedDB.onversionchange = () => cachedDB.close();
  return { db: cachedDB, isNewStore: true };
};

然后修改原有的增删查方法，统一用getDB拿实例，不需要自己重复写开库逻辑，以getAllIndexDBItem为例：

const getAllIndexDBItem = async (ID) => {
  const { db } = await getDB(ID);
  const targetStoreName = `myindexDB${ID}`;
  return new Promise((resolve, reject) => {
    const transaction = db.transaction([targetStoreName], 'readonly');
    const store = transaction.objectStore(targetStoreName);
    const req = store.getAll();
    req.onsuccess = () => resolve(req.result || []);
    req.onerror = () => reject(`查询数据失败: ${req.error}`);
  });
};

页面加载时直接调用即可，不需要单独先执行createIndexDB，所有增删改查方法内部会自动判断是否需要新建store、自动处理版本升级：

// 页面加载逻辑
const allData = await getAllIndexDBItem(querystringID);

• 不要每次操作都新开数据库连接，用缓存的实例即可，减少性能消耗和锁冲突
• 所有数据库操作都要加错误捕获，避免磁盘配额不足、浏览器隐私模式限制等场景下代码报错
• 如果你后续要修改store的结构（比如加索引），只需要在onupgradeneeded回调里加对应判断逻辑即可，版本号会自动递增，不需要手动修改

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