JavaScript 中 LocalStorage 怎么实现图片二进制数据的本地缓存-js教程-PHP中文网

LocalStorage不能直接存储图片二进制数据，因其仅支持字符串；需先将ArrayBuffer等转为Base64字符串存入，读取时再解码为data URL供使用；大图推荐IndexedDB或Cache API。

javascript 中 localstorage 怎么实现图片二进制数据的本地缓存

LocalStorage 本身不能直接存储图片的二进制数据（如 ArrayBuffer 或 Uint8Array），但它可以存储字符串。所以实现图片二进制数据本地缓存的关键是：把二进制数据转成字符串（常用 Base64 编码），再存入 LocalStorage；读取时再解码还原为二进制或 Blob，供显示或进一步处理。

为什么不能直接存二进制？

LocalStorage 的值只能是字符串。尝试存 Uint8Array、Blob 或 ArrayBuffer 会自动调用 .toString()，结果通常是 [object Uint8Array] 这类无意义字符串，原始数据完全丢失。

推荐方案：Base64 编码 + 字符串存储

这是最兼容、最简单的方式，适合中小尺寸图片（如头像、图标、截图等）。注意 Base64 会使体积增大约 33%，且 LocalStorage 有容量限制（通常 5–10 MB/域）。

保存图片时：用 fetch 或 FileReader 读取图片为 ArrayBuffer → 转为 Base64 字符串 → 存入 LocalStorage
读取图片时：从 LocalStorage 取出 Base64 字符串 → 转回 Uint8Array 或直接生成 data: URL → 设置给

实际操作示例

保存图片（例如从文件 input 获取）：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const arrayBuffer = await file.arrayBuffer();
  const uint8Array = new Uint8Array(arrayBuffer);
  const base64 = btoa(String.fromCharCode(...uint8Array)); // 简单 Base64 编码
  localStorage.setItem('cached-avatar', base64);
  localStorage.setItem('cached-avatar-type', file.type); // 记录 MIME 类型
});

加载图片：

const base64 = localStorage.getItem('cached-avatar');
const type = localStorage.getItem('cached-avatar-type') || 'image/png';
if (base64) {
  const img = document.getElementById('avatar');
  img.src = `data:${type};base64,${base64}`;
}