核心是直接存blob或arraybuffer、不转base64、分片处理大文件、配合元数据管理；blob适合直接展示，arraybuffer用于精细操作；超200mb需分2–4mb片存入双表，读取优先用url.createobjecturl或stream避免内存溢出。
网页端用 IndexedDB 缓存大量图片或视频，核心是**直接存 Blob 或 ArrayBuffer，不转 base64，分片处理大文件，配合元数据管理**。浏览器原生支持，效率高、空间省，但操作不当容易卡顿或失败。
存什么：优先选 Blob，ArrayBuffer 用于精细操作
Blob 是最简方案，适合缓存后直接展示或上传：
- 从
fetch、input[type=file]或canvas.toBlob()获取的 Blob 可直接put到 objectStore - 避免传
File对象本身（它是 Blob 子类，但部分旧环境克隆不稳定），可用file.slice()或file.arrayBuffer()先转换 - ArrayBuffer 更适合需要解码头信息、校验、生成缩略图等场景；写入前确保未被
transfer或 detach
怎么存：分片 + 元数据分离，避开内存瓶颈
单个文件超 200MB 容易触发事务超时或内存溢出，推荐分片：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 按 2–4MB 切分 ArrayBuffer 片段，用
blob.slice(start, end)或new Uint8Array(buffer, offset, length)提取 - 建两个 objectStore：
files存元数据（id、name、type、totalChunks、size），file_chunks存每一片，key 设为"${fileId}_${index}" - 写入用单个 readwrite 事务批量提交所有分片，减少开销
怎么读：流式加载，避免全量 arrayBuffer()
读取大图/视频时，别一股脑调 blob.arrayBuffer()：
- 小图或需 JS 处理时，用
URL.createObjectURL(blob)直接赋给<img src>或<video src></video> - 需解析二进制内容时，用
blob.stream()配合ReadableStream分块读取，或只取关键片段（如 JPEG 的 SOI/SOF） - 还原完整文件时，从
file_chunks按序读出所有分片，再new Blob(chunks)合并，无需手动拼 ArrayBuffer
其他关键细节
提升稳定性和可维护性：
- 数据库打开时监听
onupgradeneeded，版本升级时仅做必要结构调整，避免迁移大量数据 - 给图片加索引，比如
createIndex('type', 'type')或createIndex('uploadTime', 'uploadTime')，方便按类型或时间筛选 - 定期清理过期缓存，用
transaction.objectStore('files').openCursor()遍历并删除 - 用
navigator.storage.estimate()监控已用空间，接近上限时提示用户或自动清理
