HTML 表单没有直接写入本地文件的能力。浏览器的安全模型只允许把数据交给服务器,或交给页面自身可访问的存储。

边界在哪
原生提交会把数据打包发到 action 指定的地址,目标只能是网络位置。本地文件系统的写入被沙箱隔离,页面代码无法直接触达。
路径一:导出为文件下载
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = new FormData(form);
const text = [...data.entries()].map(([k, v]) => k + ': ' + v).join('; ');
const blob = new Blob([text], { type: 'text/plain' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'form.txt';
a.click();
URL.revokeObjectURL(a.href);
});
拦截提交,把数据拼成文本,用 Blob 生成下载。用户得到一份本地文件,写入动作由浏览器完成。
路径二:写入页面存储
| 存储 | 容量 | 持久性 |
|---|---|---|
| localStorage | 约 5MB | 长期 |
| sessionStorage | 约 5MB | 会话内 |
| IndexedDB | 较大 | 长期,结构化 |
数据需要在页面间复用时选 localStorage 或 IndexedDB,只做临时暂存时选 sessionStorage。
注意点
- 下载方式每次生成一份文件,历史记录不会被覆盖更新。
- 存储路径下的数据按来源隔离,换浏览器后不可见。
- 敏感内容不要明文写入本地存储。
