如何在localStorage中保存.txt文件并实现后续重新加载？解决HTML file input元素刷新后需重选文件的问题

这个需求很实用，我来给你一套完整的实现方案，核心思路是把文本文件的内容、文件名、类型这些关键信息存储到localStorage中，页面重新加载时再将这些数据还原成原生的File对象，这样就能跳过重新选择文件的步骤，直接恢复之前的文件状态。

实现步骤与代码示例 #

1. HTML结构 #

先准备基础的文件输入框和状态提示区域：

<input type="file" id="txtFileInput" accept=".txt">
<div id="operationStatus"></div>

2. JavaScript核心逻辑 #

（1）读取文件并保存到localStorage

当用户选择文件后，读取文本内容并将文件信息序列化后存入localStorage：

const fileInput = document.getElementById('txtFileInput');
const statusDiv = document.getElementById('operationStatus');

// 监听文件选择事件
fileInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 使用FileReader读取文本内容
  const reader = new FileReader();
  reader.onload = function(event) {
    const fileContent = event.target.result;
    // 整理需要存储的文件数据
    const savedFileInfo = {
      fileName: selectedFile.name,
      fileType: selectedFile.type,
      content: fileContent
    };
    // 转成JSON字符串存入localStorage
    localStorage.setItem('persistedTxtFile', JSON.stringify(savedFileInfo));
    statusDiv.textContent = `✅ 已成功保存文件：${selectedFile.name} 到localStorage`;
  };
  reader.readAsText(selectedFile);
});

（2）页面加载时自动恢复文件

页面初始化时，检查localStorage中是否有保存的文件数据，若有则还原成File对象并赋值给文件输入框：

// 页面加载完成后执行恢复逻辑
window.addEventListener('load', () => {
  const savedFileData = localStorage.getItem('persistedTxtFile');
  if (!savedFileData) return;

  const { fileName, fileType, content } = JSON.parse(savedFileData);
  // 从存储的内容还原出File对象
  const restoredFile = new File([content], fileName, { type: fileType });
  
  // 由于fileInput的files属性是只读的，需要用DataTransfer来模拟设置文件
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(restoredFile);
  fileInput.files = dataTransfer.files;

  statusDiv.textContent = `🔄 已从localStorage恢复文件：${fileName}`;
});

关键注意事项 #

• 存储限制：localStorage的存储上限通常在5MB左右，过大的TXT文件可能无法存储，这种情况建议改用IndexedDB来处理大文件。
• 内容类型：此方案仅适用于文本类文件（如TXT），二进制文件（如图片、压缩包）不适合直接存localStorage，因为转成字符串再还原可能会损坏数据。
• 安全性：localStorage中的数据是明文存储的，且同源可访问，不要用来存储敏感信息。
• 浏览器兼容性：DataTransfer和File构造函数在现代主流浏览器（Chrome、Firefox、Edge等）都支持，无需担心兼容性问题。

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