如何使用纯HTML和JS实现表单数据保存至HTML文件所在目录并支持读取共享

纯HTML + 运行在普通浏览器环境下的JS 无法实现直接写入HTML应用所在目录的需求，这是浏览器沙箱安全机制的强制限制：网页脚本默认没有权限读写本地文件系统的任意路径，你之前遇到的Blob只能下载到默认下载文件夹的问题，就是这个限制的直接体现。

你可以根据自己的使用场景选以下轻量化方案：

方案1：仅用前端技术，需要用户手动授权 #

如果你不想引入额外技术栈，且两位用户都用Chromium内核浏览器（Chrome、Edge等），可以用File System Access API实现：

• 首次使用时，引导用户手动选中HTML应用所在目录下的指定数据文件，获得读写权限后即可直接对该文件进行读写操作
• 缺点是每次重新打开网页都需要用户手动重新授权选择目标文件，无法静默读写，且不兼容Firefox、Safari浏览器

核心代码示例 #

读取文件

// 触发用户选择文件
const [fileHandle] = await window.showOpenFilePicker({
  types: [{
    description: '表单数据文件',
    accept: { 'application/json': ['.json'] }
  }]
});
const file = await fileHandle.getFile();
const data = JSON.parse(await file.text());

写入文件

// 写入到之前授权过的fileHandle
const writable = await fileHandle.createWritable();
await writable.write(JSON.stringify(formData, null, 2));
await writable.close();

方案2：套桌面端壳，无额外使用门槛 #

如果想完全静默读写指定目录的文件，直接把现有HTML+JS代码套入Electron或Tauri的桌面端壳即可：

• 两个框架都开放了底层文件系统读写API，不受浏览器沙箱限制，可以直接读写应用所在目录的任意文件
• 打包后是独立的桌面应用，双击就能用，完全支持离线，不需要额外的环境配置

方案3：局域网本地服务，多端同步更方便 #

如果两位用户在同一局域网内，可以加一个超轻量的Node.js后端：

• 只需要几十行代码就能实现静态HTML托管+表单数据读写接口
• 数据统一存在服务端设备的应用目录下，两位用户都通过局域网IP访问应用，数据自动同步，不需要手动传文件

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