使用基于浏览器的 JavaScript 和 Node 操作本地文件系统

Question

我正在制作一个需要允许用户从浏览器与文件系统交互的项目。我有很多编写客户端 JavaScript 的经验，也有很多编写 Node 脚本的经验，比如网络抓取、数据分析和文件系统工作。但是这个项目将允许用户在浏览器中更改内容，然后将数据保存在本地（最终保存到 Web 服务器）——我对此没有经验。

我已经安装了 browserify 和 browserify-fs 以在浏览器中使用 Node 的 fs 模块，并使用 browserify-fs README 中的示例创建一个目录，向其中写入文件，然后读取该文件：

var fs = require('browserify-fs');

fs.mkdir("/home", function(err){
    if (err) throw err;

    fs.writeFile("/home/hello-world.txt", "Hello world!", function(err) {
        if (err) throw err;

        fs.readFile("/home/hello-world.txt", "utf-8", function(err, data) {
            if (err) throw err;

            console.log(data);
        });
    });
});

在它记录“Hello world！”的意义上，这个“有效”。在控制台中。但据我所知，它不会在本地创建目录或保存文件。我有一种模糊的感觉，它会将这些东西暂时保存在浏览器中，并且当我离开时它们会被删除。但我想实际创建一个目录并在本地保存一个文件。我可以单独使用 JavaScript 做到这一点吗？有没有关于如何在基于浏览器的 JavaScript 和 Node 之间“闭环”的好教程？

更新

我接受了 T.J. Crowder 的回应——ExpressJS 确实使 JavaScript 中的客户端-服务器通信相对简单。我现在正在做的是，我将用户的条目保存到一个全局 JSON 对象中。当用户单击“保存”按钮时，我使用字符串化 JSON 更新 <form> 元素中隐藏的 <input> 元素的值。然后我提交表格，Express 的app.post() 加上模块body-parser 给我req.body 中的所有内容。然后我就可以进行正常的Node文件系统操作了。

Answer 1

自然，浏览器托管的 JavaScript 无法访问用户机器的文件系统（目前；有一天，可能会发生某种沙盒访问——last attempt 失败，但这并不意味着下一个必须这样做） .

所以要做到这一点，你需要两块：

1. 一个浏览器，它与用户一起完成 UI。

2. 一个节点片段，它在用户的机器上运行（因此可以访问文件系统），浏览器片段用来执行实际的文件操作。

可能最简单的片段交互方式是 HTTP，您可以使用 ExpressJS 轻松支持它。

例如，如果用户想要删除一个文件：

1. 用户点击某事说“删除此文件”
2. 浏览器 JavaScript 通过 ajax 通过 HTTP 将命令发送到 Node 进程
3. 节点进程执行删除并报告成功/失败
4. 浏览器 JavaScript 显示结果

Answer 2

您不能仅在 Javascript 中执行此操作。由于安全原因，在浏览器上运行的 Javascript 还没有足够的权限（有提议）。

https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction#restrictions

由于文件系统是沙盒化的，因此 Web 应用无法访问其他应用的文件。您也无法读取或写入文件到用户硬盘上的任意文件夹（例如，我的图片和我的文档）。