JavaScript加载JSON至IndexedDB遇异常：Admin报错、其他文件未显示

一、Admin数据已入库但报错的核心原因 #

你看到的"Error adding admin"和事务错误，本质是重复插入唯一键数据：

• admins对象仓库将username设为唯一keyPath，每次页面刷新时loadAndInsertAdminData都会被调用，执行store.add()尝试插入已存在的用户记录。
• IndexedDB的add()方法不允许插入键已存在的记录，只要有一条插入失败，整个事务就会触发错误，即便其他数据已成功入库。

解决办法 #

两种方案任选其一：

1. 用put()替代add()：put()会自动更新已存在的记录，不会因重复键报错

   adminData.forEach(admin => {
     const request = store.put(admin); // 替换add为put
     // 其余代码保持不变
   });
   

2. 仅在数据库初始化时插入数据：把数据插入逻辑移到onupgradeneeded事件中，该事件仅在数据库版本升级时执行，避免每次刷新重复插入

   request.onupgradeneeded = function(event) {
     db = event.target.result;
     // 创建对象仓库的代码不变
   
     // 初始化admin数据（仅版本升级时执行）
     if (!db.objectStoreNames.contains('admins')) {
       const store = db.createObjectStore('admins', { keyPath: 'username' });
       store.createIndex('password', 'password', { unique: false });
       // 此处可直接插入admin数据，或fetch后插入
     }
   }
   

二、Patients和Medicines数据未加载且报错的常见原因 #

这类问题通常由以下几点导致：

1. 文件路径错误 #

• 确认Patients.json和Medicines.json确实存放在项目根目录的files文件夹下
• 检查fetch URL的拼写：注意系统对文件名大小写敏感（比如是否是patients.json而非Patients.json），确保URL与实际文件名完全一致
• 可直接在浏览器地址栏访问http://localhost:8000/files/Patients.json，若返回404，说明文件路径或文件名有误

2. JSON数据不符合keyPath要求 #

• patients和medicines对象仓库将id设为keyPath，要求每条数据必须包含唯一且非空的id字段
• 检查JSON文件，确保每个条目都有类似"id": "p001"或"id": 1的字段，且id值不重复

3. 重复插入导致事务失败 #

与Admin的问题一致，若之前已插入过数据，再次用add()插入会触发错误，导致整个事务失败，数据无法正常显示。建议同样用put()替代add()。

4. 未处理fetch的错误细节 #

在loadAndInsertPatientData和loadAndInsertMedicineData的catch块中，添加更详细的错误信息，方便排查：

async function loadAndInsertPatientData() {
  try {
    const response = await fetch('http://localhost:8000/files/Patients.json');
    // 新增：检查响应状态
    if (!response.ok) {
      throw new Error(`HTTP错误! 状态码: ${response.status}`);
    }
    const patientData = await response.json();
    // 插入逻辑不变
  } catch (error) {
    console.error("患者数据加载/插入错误:", error);
  }
}

三、额外注意事项 #

• 每次修改数据库结构（比如新增对象仓库、修改keyPath），需要提升数据库版本号（比如把indexedDB.open('HospitalDB', 1)改成indexedDB.open('HospitalDB', 2)），否则onupgradeneeded事件不会触发
• 在开发者工具的Application面板中，可手动删除HospitalDB，测试全新初始化的情况

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