indexeddb可直接高效存储blob和arraybuffer，无需base64转换；存取时需保持类型一致、注意事务生命周期及键路径设计，并避免存储file对象或大文件超配额。
IndexedDB 可以直接存储 Blob 和 ArrayBuffer，无需转成 base64 或字符串，这是最高效、最推荐的方式。关键在于确保数据类型在存取过程中保持一致，并注意事务生命周期和对象存储（objectStore）的键路径设计。
直接存储 Blob 对象
Blob 是浏览器原生支持的二进制大对象，IndexedDB 完全兼容。只要 Blob 没被释放或回收（比如页面跳转前未持久化），就能正常写入和读取。
- 创建 objectStore 时无需特殊配置，使用默认的 keyPath 或自定义 key 均可
- 写入时直接 put({ id: 1, file: blob, name: "photo.jpg" })，blob 字段会自动序列化
- 读取后得到的仍是 Blob 实例，可直接用于 URL.createObjectURL()、fetch() 或 FileReader
- 注意：不要在 put 前调用 blob.slice() 或 new Blob([blob]) 生成新引用，除非有分片需求——这不会影响功能，但可能增加内存开销
直接存储 ArrayBuffer
ArrayBuffer 同样被 IndexedDB 原生支持，比 Blob 更底层，适合处理音频、图像解码数据、加密结果等场景。
- 写入前确保 ArrayBuffer 未被 detached（例如未被 transfer 或被 view 引用后释放）
- 建议配合 typed array（如 Uint8Array）一起保存元信息，例如：
{ id: 2, data: buffer, type: "image/png", length: buffer.byteLength } - 读取后得到的 ArrayBuffer 是可直接使用的副本，无需额外解析；若需视图操作，可用
new Uint8Array(result.data) - 避免将 ArrayBuffer 转为字符串或 base64 再存——既增大体积，又引入编码开销
读写时的常见注意事项
IndexedDB 对二进制数据的处理很稳定，但几个边界点容易出错：
- 事务必须在完成前保持活跃：Blob / ArrayBuffer 的读写操作不能跨事务执行，不能在 onsuccess 回调外访问 event.target.result
- 不支持直接存储 File 对象（File 是 Blob 的子类，但含额外属性如 lastModified、webkitRelativePath），应先提取其 blob 数据或转为纯 Blob
- 大文件（如 >100MB）写入可能触发 QuotaExceededError，建议分块存储或结合 service worker 缓存策略
- 测试时注意 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;
};
};
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
