直接删 DOM 中的 标签不等于清空本地存储，还需依次释放 blob URL、清除 localStorage/indexedDB 数据、删除 cacheStorage 缓存，否则图片仍驻留并可能复原。
直接删 DOM 中的 <img alt="离线HTML网页怎么批量删除图片？轻量化存储方法" > 标签不等于清空本地存储
很多人以为在离线 HTML 页面里用 document.querySelectorAll('img').forEach(img => img.remove()) 就算“删掉了图片”，其实只是隐藏了渲染，原始图片数据仍驻留在：
• localStorage 或 indexedDB 中（如果页面用 JS 缓存过 base64 或 blob URL）
• 浏览器的 cacheStorage（若配了 Service Worker）
• 甚至 sessionStorage 里临时存的缩略图 URL
不清理这些，下次打开页面可能立刻复原，或持续占用几十 MB 空间。
批量清除本地缓存图片的三步实操法
适用于纯 HTML + JS 的离线工具（如 imgshrink.html 这类单文件压缩器），无需后端、不依赖框架：
- 先清内存引用：遍历所有已创建的
URL.createObjectURL()生成的 blob URL，用URL.revokeObjectURL(url)主动释放，否则浏览器不会回收对应 blob 数据 - 再清持久化缓存：检查是否用了
localStorage.setItem('imageList', JSON.stringify([...]))存过图片数组，直接localStorage.removeItem('imageList')（别只清空数组再 set，旧 blob 引用还在） - 最后清缓存存储（如有 Service Worker）：在控制台执行
await caches.delete('img-cache-v1')，注意缓存名要和 SW 中cacheName一致
indexedDB 存图时批量删除的坑
如果项目用 indexedDB 存了大量图片 blob（比如离线图库类工具），调用 clear() 前必须确认：
- 数据库版本没被其他标签页锁定——否则
clear()会静默失败，需先db.close()再重开 - store 名称是否带动态后缀（如
images_202610），硬写transaction.objectStore('images')会报NotFoundError - 删除后未触发
onsuccess就执行后续逻辑，容易误判为“已清空”，建议用 async/await 封装：const clearStore = async (dbName, storeName) => { const DBOpenRequest = indexedDB.open(dbName); return new Promise((resolve) => { DBOpenRequest.onsuccess = () => { const db = DBOpenRequest.result; const transaction = db.transaction(storeName, 'readwrite'); transaction.objectStore(storeName).clear(); transaction.oncomplete = () => resolve(); }; }); };
真正轻量：用 sessionStorage 替代长期缓存
对仅需“本次会话有效”的图片操作（如临时预览、裁剪中图），优先用 sessionStorage 而非 localStorage：
立即学习“前端免费学习笔记（深入）”；
- 关闭标签页自动清空，不用手动
removeItem - 无法跨标签共享，但正适合单文件工具的隔离场景
- 存 base64 图片时，记得截断前缀：
data:image/png;base64,后面才是真数据，否则体积虚高 30%
最关键的不是删得快，而是删得干净——blob 不 revoke、indexedDB 不 close、缓存名写错，都会让“已删除”变成“假删除”。
