本地单文件HTML应用能否实现跨浏览器可迁移的文件读写？

核心结论 #

file://协议下的内嵌JavaScript无法直接读写本地文件/文件夹——这是现代浏览器的安全策略，防止恶意脚本随意操作本地系统。但你完全不用放弃HTML方案，以下几个纯前端思路完美匹配你的需求：

1. 用文件导入/导出实现多存档与跨设备迁移 #

这是最贴合你需求的方案，完全无依赖，纯前端实现：

• 读取存档：用<input type="file">让用户手动选择本地的INI/文本存档文件，通过File API读取内容并解析到页面中。
• 保存存档：把当前清单的勾选状态、配置等数据生成文本/INI格式内容，通过Blob和下载链接让用户保存到HTML文件所在的文件夹。
• 跨设备迁移：用户只需复制HTML文件和所有存档文件到新设备，双击HTML后导入对应存档即可。

示例代码（极简版）：

<!-- 读取存档按钮 -->
<input type="file" id="loadSave" accept=".txt,.ini">
<!-- 保存存档按钮 -->
<button onclick="saveArchive()">保存存档</button>

<script>
// 读取存档
document.getElementById('loadSave').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(event) {
    const archiveContent = event.target.result;
    // 解析存档内容，更新页面勾选状态
    // 示例：假设存档是每行"[勾选状态],[项目名],[图片路径]"
    const lines = archiveContent.split('\n');
    lines.forEach(line => {
      const [checked, name, imgPath] = line.split(',');
      // 找到对应清单项，设置勾选状态
      const item = document.querySelector(`[data-name="${name}"]`);
      if (item) item.checked = checked === 'true';
    });
  };
  reader.readAsText(file);
});

// 保存存档
function saveArchive() {
  const items = document.querySelectorAll('.list-item');
  let content = '';
  items.forEach(item => {
    const checked = item.checked;
    const name = item.dataset.name;
    const imgPath = item.dataset.img;
    content += `${checked},${name},${imgPath}\n`;
  });
  // 生成下载链接
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `存档_${new Date().getTime()}.txt`;
  a.click();
  URL.revokeObjectURL(url);
}
</script>

2. 图片离线缓存与迁移 #

• 把图片和HTML文件放在同一文件夹，用相对路径引用（比如<img src="./images/item1.jpg">），首次打开浏览器会自动缓存图片，离线也能访问。
• 跨设备迁移时，只需复制整个文件夹（包含HTML、图片、存档文件），双击HTML即可直接使用，无需额外操作。

3. 简化版：利用浏览器"保存网页"功能快速保存状态 #

如果不需要多存档，仅需保存当前勾选状态：

• 把勾选状态同步到DOM的属性中（比如给勾选的项加data-checked="true"）。
• 用户修改后，使用浏览器的「保存网页」功能（快捷键Ctrl+S），浏览器会把当前DOM状态和资源一起保存为HTML文件，下次打开就是修改后的状态。

为什么你之前的方法无效？ #

• require('fs')是Node.js的服务端API，浏览器环境不支持。
• ActiveXObject仅兼容旧版IE，现代浏览器已完全禁用该接口。
• localStorage/sessionStorage是浏览器隔离的本地存储，数据无法直接跨浏览器/设备迁移，必须手动导出导入。

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