如何在本地运行的网站中通过JavaScript保存数据至本地文本文件？

嘿，这个需求特别贴合小范围信任用户的场景——毕竟咱们要的就是完全本地、不依赖网络和浏览器存储的方案。下面给你几个经过验证的可行路子，都是针对你的需求设计的：

方案1：利用现代浏览器的File System Access API（推荐） #

现代Chrome、Edge、Firefox等主流浏览器都支持这个API，它允许用户主动授权浏览器访问本地文件/文件夹，之后JavaScript就能直接读写这些文件了。刚好你的用户是信任的，引导他们点一下授权就行，完全符合本地U盘运行的场景。

举个简单的读写示例：

// 预先创建好空的data.txt在U盘网站目录下，然后请求访问这个文件
async function openDataFile() {
  try {
    // 让用户选择U盘里的data.txt
    const [fileHandle] = await window.showOpenFilePicker({
      types: [{ description: 'Text Files', accept: { 'text/plain': ['.txt'] } }],
      startIn: 'downloads' // 可以改成用户U盘的路径，或者让用户自己找
    });
    // 获取文件读写权限
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log('当前数据:', contents);

    // 写入数据的示例
    const writable = await fileHandle.createWritable();
    await writable.write('新的用户数据内容');
    await writable.close();
    alert('数据保存成功！');
  } catch (err) {
    console.error('操作出错:', err);
  }
}

优点：纯前端实现，不用额外工具，授权一次后后续操作更顺畅；注意：每次打开网站可能需要重新授权（取决于浏览器设置），但信任用户完全可以接受。

方案2：用Node.js搭个迷你本地服务器（自动化程度高） #

如果你的用户愿意装个Node.js（其实很简单，一键安装），你可以在U盘里放一个超轻量的Node脚本，启动一个本地临时服务器，这样服务器端的Node代码有完全的文件系统权限，就能直接读写U盘里的文本文件了——而且这个服务器只在用户本地运行，完全不依赖网络。

步骤大概是：

1. 在U盘网站根目录下创建server.js：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const PORT = 3000;

// 静态文件服务，托管你的网站
app.use(express.static(path.join(__dirname, 'public'))); // 假设你的网站文件在public文件夹里
app.use(express.text());

// 读取数据接口
app.get('/api/get-data', (req, res) => {
  const dataPath = path.join(__dirname, 'data.txt');
  fs.readFile(dataPath, 'utf8', (err, data) => {
    if (err) return res.status(500).send('读取失败');
    res.send(data || '');
  });
});

// 写入数据接口
app.post('/api/save-data', (req, res) => {
  const dataPath = path.join(__dirname, 'data.txt');
  fs.writeFile(dataPath, req.body, 'utf8', (err) => {
    if (err) return res.status(500).send('保存失败');
    res.send('保存成功');
  });
});

app.listen(PORT, () => {
  console.log(`本地服务器已启动，请访问 http://localhost:${PORT}`);
});

2. 再创建package.json：

{
  "name": "local-u盘-site",
  "dependencies": {
    "express": "^4.18.2"
  }
}

3. 让用户第一次使用时在U盘目录下运行npm install，之后每次用的时候运行node server.js，然后在浏览器打开http://localhost:3000就行。

优点：完全自动化读写，用户不用手动选文件；注意：需要用户安装Node.js，但对于10-15个信任用户来说，教一次就会了。

方案3：纯前端下载/上传（最兼容，无需额外工具） #

如果不想依赖浏览器API或Node.js，这个最稳妥——就是让用户手动下载保存数据文件，加载的时候手动选择文件上传。虽然需要用户点几下，但胜在完全兼容所有浏览器，没有任何权限问题。

示例代码：

<!-- 保存数据按钮 -->
<button onclick="saveData()">保存数据</button>
<!-- 加载数据按钮 -->
<input type="file" accept=".txt" onchange="loadData(this)">

<script>
// 假设用户数据存在这个变量里
let userData = '初始数据';

function saveData() {
  const blob = new Blob([userData], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.txt'; // 让用户保存到U盘网站目录下
  a.click();
  URL.revokeObjectURL(url);
}

function loadData(input) {
  const file = input.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    userData = e.target.result;
    alert('数据加载成功！');
  };
  reader.readAsText(file);
}
</script>

优点：零依赖，任何浏览器都能用；注意：需要用户记住把文件保存到U盘的指定位置，不过小范围用户沟通一下就没问题。

总结 #

• 如果想尽量自动化，优先选方案1（File System Access API），只要用户用现代浏览器就行；
• 如果完全不想用户手动操作，选方案2（Node.js迷你服务器），稍微有点技术门槛但体验最好；
• 如果要兼容所有老浏览器，选方案3（纯前端下载上传），最稳妥。

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