### [表单数据保存到本地：浏览器的边界](https://www.huociguo.com/article/1702)

**Published:** 2026-10-02T04:30:10

**Author:** 米了

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

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

![白色键盘特写](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-12794350.jpeg)

本地写入被沙箱隔离，需要间接路径

## 边界在哪

原生提交会把数据打包发到 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。

## 注意点

-   下载方式每次生成一份文件，历史记录不会被覆盖更新。
-   存储路径下的数据按来源隔离，换浏览器后不可见。
-   敏感内容不要明文写入本地存储。

**Tags:** Blob对象, 文件下载, 本地写入, 表单交互, 表单提交

**Categories:** HTML5

---