如何正确存储File对象到localStorage并取回原格式对象？

问题原因 #

localStorage仅支持存储字符串类型数据，直接存入File/Blob对象时，JavaScript会自动调用对象的toString()方法，导致最终存储的是[object File]字符串，无法还原为原始File对象。

解决方案 #

需要将File对象转换为可序列化的格式（结合二进制数据的base64字符串+File元数据）存入localStorage，取出时再反向还原为File对象。

1. 修改存入逻辑

将File对象转成base64字符串，同时保存File的关键元数据（名称、类型、修改时间），组合成JSON对象后存入：

convertBlobUrlToFile(croppedImage, imageFileName, fileType).then((fileObject) => {
  const reader = new FileReader();
  reader.onload = () => {
    const storedData = {
      name: fileObject.name,
      type: fileObject.type,
      lastModified: fileObject.lastModified,
      base64: reader.result
    };
    localStorage.setItem('croppedImage', JSON.stringify(storedData));
  };
  reader.readAsDataURL(fileObject);
}).catch((error) => {
  console.error(error);
});

2. 修改取出还原逻辑

从localStorage读取JSON字符串，解析后将base64转成Blob，再用元数据创建新的File对象：

function retrieveStoredFile() {
  const storedJson = localStorage.getItem('croppedImage');
  if (!storedJson) return null;

  const { name, type, lastModified, base64 } = JSON.parse(storedJson);
  // 剥离base64前缀，解码二进制数据
  const base64Payload = base64.split(',')[1];
  const byteChars = atob(base64Payload);
  const byteArrays = [];

  for (let i = 0; i < byteChars.length; i += 512) {
    const slice = byteChars.slice(i, i + 512);
    const byteNumbers = Array.from(slice, char => char.charCodeAt(0));
    byteArrays.push(new Uint8Array(byteNumbers));
  }

  const blob = new Blob(byteArrays, { type });
  // 还原为File对象
  return new File([blob], name, { type, lastModified });
}

// 使用示例
const restoredFile = retrieveStoredFile();
console.log(restoredFile); // 输出原始格式的File对象

注意事项 #

• base64编码会使数据体积增加约33%，如果存储大文件（超过几MB），建议使用IndexedDB替代localStorage；
• 还原后的File对象与原始对象是不同的实例，但所有核心属性（name、type、size、lastModified）和二进制内容完全一致，不影响后续上传等操作。

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