HTML5 中 IndexedDB 怎么将复杂 JavaScript 对象安全序列化存储-H5教程-PHP中文网

IndexedDB依赖结构化克隆算法自动处理对象复制，支持普通对象、数组、Date、ArrayBuffer、Blob、File、Map、Set等类型直接存储；函数、Promise、Symbol、DOM元素、Error、RegExp、循环引用及WeakMap/WeakSet等必须提前清理或转换，否则抛DataCloneError。

html5 中 indexeddb 怎么将复杂 javascript 对象安全序列化存储

IndexedDB 本身不负责序列化，它依赖浏览器的“结构化克隆算法”（Structured Clone Algorithm）自动处理对象复制与存储。只要对象符合该算法支持的类型范围，就能直接存入，无需手动 JSON.stringify() 或其他转换——但必须提前识别哪些能存、哪些会静默失败。

哪些复杂对象可以直接安全存储

以下嵌套结构均可原样使用 put() 或 add() 存入 object store，浏览器会自动深克隆：

普通对象与数组的任意嵌套，例如：{ id: 1, profile: { name: 'Tom', tags: ['dev', 'web'] }, settings: { theme: 'dark', zoom: 1.2 } }
Date 对象（存为时间戳，读取时自动还原为 Date 实例）
ArrayBuffer、Uint8Array、DataView 等二进制视图（适合存加密密文、音频帧、图像原始数据）
Blob 和 File 对象（可直接存用户上传的附件，无需转 base64）
Map 和 Set（需 Chrome 57+/Firefox 53+/Safari 15.4+；键与值本身也须可克隆）

哪些必须提前清理或转换

以下类型无法被结构化克隆，写入时会抛出 DataCloneError，导致事务中止、数据丢失且无提示：

函数、Promise、Generator、async 方法（哪怕只是对象里的一个方法字段）
Symbol 键或值（包括用 Symbol('id') 作对象属性名）
DOM 元素、window、document、NodeList
Error、RegExp（部分浏览器支持但行为不一致，不建议依赖）
循环引用对象（如 const a = {}; a.self = a;）
WeakMap、WeakSet（设计上不可序列化）

建议在存入前用轻量校验函数过滤，例如移除所有函数属性：JSON.parse(JSON.stringify(obj)) 可快速剔除不可克隆项（但会丢失 Date、undefined、BigInt 等，仅作临时检查用）。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

含敏感字段的对象要额外加密

即使对象结构合法，身份证号、token、私钥等敏感字段也不能明文入库。必须在存入前加密：

用 crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, data) 加密原始值
每次加密生成新 IV（12 字节随机），与密文一起存为对象字段，例如：{ encryptedIdCard: 'base64密文', iv: 'base64iv' }
密钥不得硬编码，须由用户密码 + 服务端下发 salt 经 PBKDF2 派生，且仅内存存在