部署至GitHub Pages后IndexedDB对象存储未找到错误求助

错误原因 #

本地运行正常但部署后报错，核心问题有两个可能：

1. 浏览器残留旧版本IndexedDB数据：本地首次运行时触发了onupgradeneeded创建了client对象仓库，但部署到GitHub Pages后，用户浏览器可能存储了旧版本数据库（比如版本号未更新、之前测试过其他结构），导致onupgradeneeded未触发，对象仓库未创建。
2. 数据库初始化未完成就执行事务：你的代码未处理request.onsuccess回调，全局db变量可能还未被正确赋值，就被用来创建事务，此时对象仓库还不存在。

修复步骤 #

1. 完善数据库初始化流程 #

确保所有数据库操作都在初始化完成后执行，同时增加版本号触发强制升级，避免旧数据干扰：

let db;
// 升级版本号（从1改为2），强制触发onupgradeneeded流程
const request = window.indexedDB.open("newDatabase", 2);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 先检查对象仓库是否存在，避免重复创建报错
  if (!db.objectStoreNames.contains("client")) {
    const objectStore = db.createObjectStore("client", { autoIncrement: true });
    // 创建索引
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("lastName", "lastName", { unique: false });
    objectStore.createIndex("email", "email", { unique: true });
    objectStore.createIndex("ID", "ID", { unique: true });
    objectStore.createIndex("postal", "postal", { unique: false });
    objectStore.createIndex("phoneNumber", "phoneNumber", { unique: true });
  }
};

request.onsuccess = function(event) {
  db = event.target.result;
  // 数据库初始化完成后，再绑定表单提交事件
  const form = document.getElementById("form");
  form.addEventListener("submit", handleFormSubmit);
};

request.onerror = function(event) {
  console.error("数据库打开失败:", event.target.error);
};

2. 规范表单提交逻辑 #

把数据添加操作封装到独立函数，确保仅在数据库就绪时执行：

function handleFormSubmit(e) {
  e.preventDefault(); // 阻止表单默认跳转
  const formElements = this.elements;
  
  if (!db) {
    console.error("数据库未初始化完成");
    return;
  }

  const addRequest = db
    .transaction(["client"], "readwrite")
    .objectStore("client")
    .add({
      name: formElements[0].value,
      lastName: formElements[1].value,
      email: formElements[2].value,
      postal: formElements[3].value,
      ID: formElements[4].value,
      phoneNumber: formElements[5].value,
    });

  addRequest.onsuccess = function() {
    console.log("数据添加成功");
    // 这里可以添加表格刷新逻辑
  };

  addRequest.onerror = function(event) {
    console.error("数据添加失败:", event.target.error);
  };
}

额外排查方案 #

如果自己测试部署后的页面：

• 打开浏览器开发者工具（F12），进入Application标签，找到IndexedDB，删除newDatabase后刷新页面，强制重新初始化数据库。

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