HTML5中IndexedDB存储Blob文件对象或ArrayBuffer方案

HTML5中IndexedDB存储Blob文件对象或ArrayBuffer方案需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

IndexedDB可直接高效存储Blob和ArrayBuffer，无需base64转换；存取时需保持类型一致、注意事务生命周期及键路径设计，并避免存储File对象或大文件超配额。

IndexedDB 可以直接存储 Blob 和 ArrayBuffer，无需转成 base64 或字符串，这是最高效、最推荐的方式。关键在于确保数据类型在存取过程中保持一致，并注意事务生命周期和对象存储（objectStore）的键路径设计。

直接存储 Blob 对象

Blob 是浏览器原生支持的二进制大对象，IndexedDB 完全兼容。只要 Blob 没被释放或回收（比如页面跳转前未持久化），就能正常写入和读取。

1. 创建 objectStore 时无需特殊配置，使用默认的 keyPath 或自定义 key 均可
2. 写入时直接 put({ id: 1, file: blob, name: "photo.jpg" })，blob 字段会自动序列化
3. 读取后得到的仍是 Blob 实例，可直接用于 URL.createObjectURL()、fetch() 或 FileReader
4. 注意：不要在 put 前调用 blob.slice() 或 new Blob([blob]) 生成新引用，除非有分片需求——这不会影响功能，但可能增加内存开销

直接存储 ArrayBuffer

ArrayBuffer 同样被 IndexedDB 原生支持，比 Blob 更底层，适合处理音频、图像解码数据、加密结果等场景。

1. 写入前确保 ArrayBuffer 未被 detached（例如未被 transfer 或被 view 引用后释放）
2. 建议配合 typed array（如 Uint8Array）一起保存元信息，例如：{ id: 2, data: buffer, type: "image/png", length: buffer.byteLength }
3. 读取后得到的 ArrayBuffer 是可直接使用的副本，无需额外解析；若需视图操作，可用 new Uint8Array(result.data)
4. 避免将 ArrayBuffer 转为字符串或 base64 再存——既增大体积，又引入编码开销

读写时的常见注意事项

IndexedDB 对二进制数据的处理很稳定，但几个边界点容易出错：

1. 事务必须在完成前保持活跃：Blob / ArrayBuffer 的读写操作不能跨事务执行，不能在 onsuccess 回调外访问 event.target.result
2. 不支持直接存储 File 对象（File 是 Blob 的子类，但含额外属性如 lastModified、webkitRelativePath），应先提取其 blob 数据或转为纯 Blob
3. 大文件（如 >100MB）写入可能触发 QuotaExceededError，建议分块存储或结合 service worker 缓存策略
4. 测试时注意 Chrome 的隐私模式（Incognito）对 IndexedDB 的限制更严格，部分版本会清空数据库或拒绝写入

简单示例：存取一张图片 Blob

以下代码片段展示核心流程，不含错误处理和封装，便于理解本质逻辑：

const request = indexedDB.open("fileDB", 1);request.onupgradeneeded = e => {  const db = e.target.result;  if (!db.objectStoreNames.contains("files")) {    db.createObjectStore("files", { keyPath: "id" });  }};request.onsuccess = e => {  const db = e.target.result;  const tx = db.transaction("files", "readwrite");  const store = tx.objectStore("files");  // 存储 Blob  const blob = await fetch("/test.png").then(r => r.blob());  store.put({ id: 1, name: "test.png", file: blob });  // 读取并显示  store.get(1).onsuccess = e => {    const record = e.target.result;    const url = URL.createObjectURL(record.file);    document.querySelector("img").src = url;  };};