无需服务器，能否用HTML/JavaScript将表单数据写入本地TXT文件？

浏览器的安全策略禁止前端脚本直接写入本地文件，这就是你之前把表单action设为TXT文件后，只会跳转空白页面的原因——这种方式根本没法把用户输入写入文件。

下面是无服务器场景下可行的解决方案：

方案：用JavaScript触发文件下载，让用户手动保存 #

通过拦截表单提交事件，生成包含用户邮箱的TXT文件，触发浏览器的下载弹窗，由用户选择保存路径。代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>保存邮箱到本地</title>
</head>
<body>
    <form id="emailForm">
        <label for="email">电子邮箱：</label>
        <input type="email" id="email" required>
        <button type="submit">保存邮箱</button>
    </form>

    <script>
        const form = document.getElementById('emailForm');
        form.addEventListener('submit', function(e) {
            // 阻止表单默认跳转行为
            e.preventDefault();
            
            // 获取用户输入的邮箱
            const email = document.getElementById('email').value;
            
            // 创建包含邮箱内容的Blob对象
            const blob = new Blob([email], { type: 'text/plain' });
            
            // 创建下载链接
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            // 设置保存的文件名
            a.download = 'emails.txt';
            
            // 触发下载
            a.click();
            
            // 清理临时链接
            URL.revokeObjectURL(a.href);
            document.body.removeChild(a);
        });
    </script>
</body>
</html>

代码说明： #

• e.preventDefault()：阻止表单默认的跳转行为，避免跳转到空白TXT文件。
• Blob：将邮箱文本包装成可下载的二进制对象。
• a.download：指定下载文件的名称，用户保存时会默认用这个文件名。
• 触发a.click()后，浏览器会弹出保存对话框，用户选择本地路径即可完成保存。

注意事项： #

这种方式必须经过用户手动确认保存，因为浏览器的安全机制不允许前端脚本自动操作本地文件，这是无法绕过的限制。

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