Chrome中IndexedDB存大JSON报错：createObjectStore键路径无效修复

错误根源 #

你遇到的SyntaxError是因为代码中list2: this.Items.toString()这行完全不符合Dexie定义对象仓库的语法规则。Dexie要求对象仓库的定义是主键路径+可选索引的格式，而你把JSON对象直接转成字符串作为键路径，导致底层IndexedDB的createObjectStore无法识别无效的键路径。

另外，你尝试直接调用db.createObjectStore失败，是因为Dexie是IndexedDB的封装库，它不暴露原生IndexedDB的createObjectStore方法，必须使用Dexie自身的版本化仓库定义API。

修复步骤 #

1. 正确定义Dexie对象仓库
   根据你的需求，重新定义list2的结构：

   • 如果要存储的this.Items是一组对象，且每个对象有唯一标识（比如id），可以指定该标识为主键：

     var db = new Dexie("TheList");
     db.version(1).stores({
       list1: "++id,name",
       list2: "id" // 假设你的每个Item对象都有"id"属性作为唯一键
     });
     

   • 如果没有现成的唯一键，使用Dexie的自增主键：

     var db = new Dexie("TheList");
     db.version(1).stores({
       list1: "++id,name",
       list2: "++id" // 自动生成自增主键
     });
     

   • 如果只需要存储任意结构的对象，不需要额外索引，甚至可以简化为：

     var db = new Dexie("TheList");
     db.version(1).stores({
       list1: "++id,name",
       list2: null // Dexie会自动生成默认主键
     });
     

2. 正确存储100MB JSON数据

   • 如果this.Items是一个数组（包含多个条目），使用批量插入提升效率：

     db.open().then(async () => {
       await db.list2.bulkAdd(this.Items);
       console.log("数据存储成功");
     }).catch(e => {
       console.log("error: " + e);
     });
     

   • 如果是单个大JSON对象，直接插入即可：

     db.open().then(async () => {
       await db.list2.add(this.Items);
       console.log("数据存储成功");
     }).catch(e => {
       console.log("error: " + e);
     });
     

注意事项 #

IndexedDB支持大对象存储，但100MB的单个对象可能会占用较多内存，建议如果是可拆分的数据，尽量拆分为多个小条目存储，避免内存压力。

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