存储BlobURL到localStorage后读取报net::ERR_FILE_NOT_FOUND的原因及复用方法

错误原因 #

• URL.createObjectURL()生成的Blob URL是临时会话绑定的，仅在当前页面会话（未刷新、未关闭）内有效。页面刷新或关闭后，浏览器会释放该URL对应的Blob资源，此时存在localStorage里的URL字符串就成了无效地址，触发net::ERR_FILE_NOT_FOUND错误。
• localStorage只能存储字符串类型数据，你存的只是URL地址，而非Blob本身，无法持久化Blob资源。

正确的Blob持久化复用方案 #

核心思路是把Blob转换成Base64编码的字符串存储到localStorage，需要时再将Base64转回Blob或直接用于图片加载。

1. 存储Blob为Base64字符串 #

修改存储逻辑，用FileReader把Blob转成Data URL（Base64格式）：

cnv.toBlob(blob => {
  const reader = new FileReader();
  reader.onload = function(e) {
    // 将Base64字符串存入localStorage
    localStorage.setItem("lorem", e.target.result);
  };
  reader.readAsDataURL(blob);
});

2. 从localStorage读取并恢复到Canvas #

读取Base64字符串后，直接赋值给Image的src，无需走fetch流程：

const base64Str = localStorage.getItem("lorem");
if (base64Str) {
  const img = new Image();
  img.onload = function() {
    cnv.ctx().drawImage(img, 0, 0);
    // 可选：如果需要转回Blob，可使用以下方法
    // fetch(base64Str).then(res => res.blob()).then(blob => { /* 使用blob */ });
  };
  img.src = base64Str;
}

补充说明 #

• Base64字符串会比原Blob体积大30%左右，如果Blob体积较大，建议用IndexedDB存储原始Blob，它支持二进制数据存储，更适合大文件持久化。
• 每次使用完URL.createObjectURL()生成的URL，记得调用URL.revokeObjectURL(blobUrl)释放资源，避免内存泄漏（页面关闭时浏览器也会自动释放）。

内容的提问来源于stack exchange，提问作者Digerkam