IndexedDB 数据结构映射：如何将类对象映射为存储记录-H5教程-PHP中文网

类对象映射indexeddb需显式转换：用class-transformer的@expose/@transform处理序列化与反序列化，主键和索引字段须与类属性严格一致，避免不可序列化类型。

indexeddb 数据结构映射：如何将类对象映射为存储记录

类对象映射为 IndexedDB 存储记录，核心是解决“结构化类实例”与“松散 JavaScript 对象记录”之间的双向转换问题。IndexedDB 本身不识别 class、constructor 或原型方法，只接受可序列化的 plain object、Blob、ArrayBuffer 等原生类型。因此，映射不是自动发生的，必须显式设计转换逻辑。

定义清晰的实体类与存储契约

先明确哪些字段需要持久化、哪些属于运行时状态（如事件监听器、私有方法）。推荐使用 TypeScript 定义类，并用 class-transformer 辅助标准化：

用 @Expose() 显式标记需存入数据库的属性
用 @Transform() 处理类型转换（例如 Date → ISO string）
避免在类中直接存 function、Map、Set、Promise 等不可序列化值
主键字段（如 id）建议设为 number 或 string，与 objectStore 的 keyPath 一致

序列化：类实例 → 可存储对象

调用 instanceToPlain() 将类实例转为纯对象，再写入 IndexedDB：

阿里云AI平台

阿里云AI平台是一款面向企业和开发者的云端人工智能服务平台。

下载

const task = new InferenceTask();
task.id = Date.now();
task.question = "求解 x² + 2x + 1 = 0";
task.timestamp = new Date();

const plain = instanceToPlain(task); // 自动处理 @Expose 和 @Transform
await store.put(plain); // 直接传入 objectStore.put()

注意：若类中含 Blob 或 ArrayBuffer，instanceToPlain() 默认不处理——需提前赋值或在 @Transform 中手动保留引用（因为它们本就可被 IndexedDB 原生存储）。

反序列化：存储记录 → 类实例

读取后用 plainToInstance() 恢复为带方法和类型的对象：

确保传入的 plain object 包含所有必需字段，尤其主键（否则构造失败）
对 Date 字段，建议在 @Transform 中用 new Date(value) 还原
若记录含 Blob，反序列化后仍为 Blob 实例，可直接用于 URL.createObjectURL()
不要依赖反序列化后的对象执行复杂逻辑前未校验字段完整性

键路径与索引需与类结构对齐

objectStore 的 keyPath 和索引字段名，应严格对应类中暴露的属性名：

例如类有 taskType: string，则创建索引时用 store.createIndex('taskType', 'taskType')
若主键是 id，且类中定义为 id: number，则 createObjectStore(..., { keyPath: 'id' }) 才能正确匹配
字段名大小写、嵌套层级（如 metadata.status）不被 IndexedDB 支持——索引只能建在顶层属性上