推荐用localStorage存Base64字符串（小图≤1MB、≤10张）或IndexedDB存Blob对象（大图、多图、长期保留）；临时预览直接用URL.createObjectURL最高效。
在HTML5中保存用户上传的历史图片，推荐用 localStorage 存 Base64 字符串（适合小图），或用 IndexedDB 存 Blob 对象（适合大图、多图、需长期保留的场景）。直接存 Blob 到 localStorage 会失败，因为 localStorage 只支持字符串。
存 Base64 到 localStorage（轻量、简单）
适用于头像、截图等尺寸较小（建议 ≤ 1MB）、数量不多（如最近 10 张）的图片。Base64 是纯字符串，可直接存取。
- 上传后读取文件为 Base64：
const reader = new FileReader(); reader.readAsDataURL(file); - 成功后提取 base64 数据（去掉前缀）：
const base64Data = result.split(',')[1]; - 存入 localStorage：
localStorage.setItem('recentImages', JSON.stringify([{id: Date.now(), data: base64Data, name: file.name}])) - 读取时解析 JSON，渲染：
<img src="data:image/png;base64," item.data alt="HTML5中存储用户上传的历史图片Base64或Blob记录" >
存 Blob 到 IndexedDB（可靠、可扩展）
适合保存原图质量、大尺寸图片或大量历史记录。Blob 本身不可序列化，但 IndexedDB 原生支持存储 Blob 和 File 对象。
- 打开数据库，创建 objectStore（如
images），键路径设为id或自增 - 上传后直接将
file（即 Blob）存入：store.add({id: Date.now(), blob: file, name: file.name, time: new Date()}) - 读取时用
URL.createObjectURL(blob)生成临时 URL 渲染图片（注意用完调URL.revokeObjectURL()避免内存泄漏） - 可配合图片元信息（宽高、类型、缩略图）一起存储，便于列表展示
注意事项与优化建议
避免踩坑，提升体验：
立即学习“前端免费学习笔记（深入）”；
- Base64 存储会比原始二进制大 ~33%，且占用更多内存；单张超过 2MB 易触发 localStorage 限制（通常 5–10MB）
- IndexedDB 操作是异步的，需用 promise 封装或 async/await 处理；首次使用建议加错误兜底（如降级到 Base64）
- 隐私敏感场景（如医疗、证件图），不建议本地长期留存；可添加「自动清理」逻辑（如只保留最近 30 天）
- 若需跨设备同步，本地存储无法满足，应搭配后端 API 实现
补充：临时预览用 URL.createObjectURL 即可
仅需当前页面内快速显示上传图片，无需持久化？直接用 URL.createObjectURL(file) 最高效。它返回一个生命周期绑定到 document 的临时 URL，页面卸载时自动释放，不占存储空间，也不涉及编码转换。
