IndexedDB 是浏览器内置支持事务的 NoSQL 数据库，适合缓存电子签名、图片裁剪等二进制数据；原生支持 Blob 存储，需创建对象仓库并设自增主键与索引，读取后用 URL.createObjectURL 渲染，注意内存泄漏与容量控制。

IndexedDB 本质上是浏览器原生提供的一套支持事务的 NoSQL 存储机制，特别适合缓存用户生成的二进制数据。

例如电子签名的画布截图、图片裁剪后的结果，这类内容都很适合放进 IndexedDB。

和 localStorage 相比，IndexedDB 更稳妥：

• 能存储更大的数据量
• 支持结构化查询
• 可在跨会话场景下持续保留数据
• 整个过程不会阻塞主线程

1. 创建数据库并定义对象仓库（Object Store）

电子签名或裁剪图通常是 Blob 或 ArrayBuffer。

IndexedDB 原生支持直接存储这些类型，无需 base64 转换。

但在初始化时，需要明确声明键路径和索引。

推荐使用自增主键 + 时间戳 + 类型标识的方式统一管理：

• 打开数据库，版本号递增可触发升级逻辑
• 在 onupgradeneeded 中创建名为 signatures 的对象仓库
• 主键设为 id，并启用 autoIncrement: true，避免手动维护 ID
• 添加 type 和 createdAt 索引，便于按类型或时间筛选

2. 存储签名/裁剪图（Blob 或 canvas.toBlob）

签名通常来自 ，裁剪图多来自 Cropper.js 或原生 canvas 处理。

关键点是直接存 Blob，不要转成 data URL 或 base64 字符串。

这样可以避免内存膨胀和额外的编码开销。

• 调用 canvas.toBlob(callback, 'image/png', 0.9) 获取 Blob
• 打开读写事务，获取对象仓库
• 调用 add({ type: 'signature', data: blob, createdAt: Date.now() }) 写入数据
• Blob 在 IndexedDB 中是“引用存储”，不会复制二进制内容，因此高效且安全

3. 读取并渲染到页面

从 IndexedDB 读取后，不能直接赋给 。

因为 IndexedDB 返回的是 Blob 实例，需要先用 URL.createObjectURL() 创建临时地址。

• 使用 get(id) 或 index.get(IDBKeyRange.bound(...)) 查询记录
• 成功后拿到 result.data，也就是 Blob
• 执行 const url = URL.createObjectURL(result.data)
• 再赋值给 img.src = url

注意：在页面卸载或图片替换前，记得调用 URL.revokeObjectURL(url)，防止内存泄漏。

4. 清理与容量控制

用户可能会频繁编辑签名，因此旧版本应自动清理。

同时还要防止数据无限增长，尤其是移动端，存储空间通常更有限。

• 按 type + createdAt 组合查询，只保留最近 N 条，例如只留 5 个签名草稿
• 使用 delete() 或 clear() 主动移除过期项
• 监听 storage 事件或捕获 QuotaExceededError 异常，提示用户清理或降级为内存缓存

5. 使用时容易忽略的细节

所有 IndexedDB 操作都是异步的，务必用 Promise 封装或 async/await 处理。

Blob 存储虽然方便，但跨 Tab 访问时仍需注意同源限制。

首次加载时，建议增加 loading 状态，避免用户误以为页面卡顿。

《夸克》非常好用的免费AI浏览器

下载APP查看