JavaScript如何将input输入内容保存到现有本地文本文件

你代码中用到的require('fs')是Node.js环境专属的API，无法在浏览器端的JavaScript中运行。浏览器出于安全沙箱限制，默认不允许网页脚本未经用户授权直接读写本地磁盘的任意文件，所以原有代码逻辑完全不适用浏览器场景。

方案1：将输入内容生成新文件触发用户下载（全浏览器兼容） #

该方案兼容性最强，所有主流浏览器都支持，用户点击按钮后会自动下载包含输入内容的txt文件，若需要合并到已有文件可手动操作：

<input id="sub" dir="ltr" type="text" placeholder="type something">
<button id="myBtn" onclick="myFunction()" class="main-btn">保存内容</button>

<script>
function myFunction() {
    // 获取输入框内容
    const content = document.getElementById('sub').value + '\r\n';
    // 构造文本类型的Blob对象
    const blob = new Blob([content], { type: 'text/plain' });
    // 生成临时下载链接
    const a = document.createElement('a');
    a.download = 'Output.txt';
    a.href = URL.createObjectURL(blob);
    // 触发下载
    a.click();
    // 释放临时资源
    URL.revokeObjectURL(a.href);
}
</script>

方案2：直接写入用户选择的本地已有文件（仅支持Chromium内核新版浏览器） #

如果需要直接追加内容到本地已有的txt文件，可以用File System Access API实现，该方案需要用户主动选择文件授权读写，仅支持Chrome、Edge等Chromium内核浏览器：

<input id="sub" dir="ltr" type="text" placeholder="type something">
<button id="myBtn" onclick="myFunction()" class="main-btn">追加内容到本地txt</button>

<script>
async function myFunction() {
    try {
        // 唤起文件选择框，让用户选择目标txt文件，请求读写权限
        const [fileHandle] = await window.showOpenFilePicker({
            types: [{
                description: '文本文件',
                accept: { 'text/plain': ['.txt'] },
            }],
        });
        // 创建可写流，保留原有文件内容
        const writable = await fileHandle.createWritable({ keepExistingData: true });
        // 移动指针到文件末尾，实现追加写入
        await writable.seek((await fileHandle.getFile()).size);
        // 写入输入框内容
        const content = document.getElementById('sub').value + '\r\n';
        await writable.write(content);
        // 关闭流完成写入
        await writable.close();
        alert('内容写入成功');
    } catch (err) {
        console.error('写入失败：', err);
    }
}
</script>

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