使用基于浏览器的JavaScript和Node操作本地文件系统 [英] Manipulating the local file system with browser-based JavaScript and Node

问题描述

我正在制作一个项目，需要允许用户从浏览器与文件系统进行交互。我在编写客户端JavaScript方面有很多经验，而且我有很多为Web抓取，数据分析和文件系统工作编写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，函数（错误，数据）{
 if（err）throw err; 
 
 console.log（data）; 
}）; 
}）; 
}）; 
  

这就是工作，因为它记录了Hello world！在控制台中。但据我所知，它不会在本地创建目录或保存文件。我有一些模糊的感觉，它是在浏览器中临时保存这些东西，并且当我离开时它们被删除。但我想实际创建一个目录并在本地保存一个文件。我可以单独使用JavaScript吗？是否有关于如何在基于浏览器的JavaScript和节点之间关闭循环的好教程？

更新

<我已经接受了TJ Crowder的回应 - ExpressJS确实使用JavaScript进行客户端 - 服务器通信相对简单。我现在正在做的是，我将用户的条目保存到全局JSON对象。当用户点击保存按钮时，我会在< form> < input> 元素的值c $ c>带有字符串化JSON的元素。然后我提交表单，Express的 app.post（）加上模块 body-parser 给我一切 req.body 。然后我可以执行正常的节点文件系统操作。

解决方案

当然，浏览器托管的JavaScript无法访问用户机器的文件系统（目前;有一天，可能会发生某种沙盒访问 — 最后一次尝试失败，但这并不意味着下一个必须）。

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

1. 一个浏览器片段，与用户一起完成用户界面。




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

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

例如，如果用户是wa nts删除文件：

1. 用户点击删除此文件的内容


2. 浏览器JavaScript通过ajax通过HTTP将命令发送到Node进程


3. 节点进程执行删除并报告成功/失败


4. 浏览器JavaScript显示结果

I am making a project that needs to allow users to interact with the file system from a browser. I have a lot of experience writing client-side JavaScript, and I have a lot of experience writing Node scripts for things like web scraping, data analysis, and file system work. But this project will let users change things in the browser, and then save that data locally (and, eventually, to a web server) – and I have no experience with this.

I've installed browserify and browserify-fs to use Node's fs module in the browser, and used the example from the browserify-fs README to create a directory, write a file to it, and then read that file:

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);
        });
    });
});

This "works" in the sense that it logs "Hello world!" in the console. But as far as I can tell, it does not create a directory or save a file locally. I have some vague sense that it is saving these things temporarily in the browser, and that they are deleted when I navigate away. But I want to actually create a directory and save a file in it locally. Can I do that with JavaScript alone? Is there a good tutorial on how to "close the loop" between browser-based JavaScript and Node?

Update

I've accepted T.J. Crowder's response – ExpressJS does, indeed, make client-server communication in JavaScript relatively simple. What I'm doing now is, I'm saving the user's entries to a global JSON object. When the user clicks a "save" button, I update the value of a hidden <input> element in a <form> element with the stringified JSON. Then I submit the form, and Express's app.post() plus the module body-parser give me everything in req.body. Then I can perform normal Node file system operations.

解决方案

Naturally, browser-hosted JavaScript cannot access the file system of the user's machine (at present; someday, some kind of sandboxed access may happen — the last attempt failed, but that doesn't mean the next one has to).

So to do this, you'll need two pieces:

1. A browser piece, which does the UI with the user.

2. A Node piece, which runs on the user's machine (and thus can access the file system) and which the browser piece uses to do the actual file operations.

Probably the easiest way for the pieces to interact would be HTTP, which you can trivially support using ExpressJS.

So for instance, if the user wants to delete a file:

1. User clicks something to say "delete this file"
2. Browser JavaScript sends the command to the Node process over HTTP via ajax
3. Node process does the deletion and reports success/failure
4. Browser JavaScript displays the result

这篇关于使用基于浏览器的JavaScript和Node操作本地文件系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！