【问题标题】:Reading/Writing to a file in javascript在javascript中读取/写入文件
【发布时间】:2017-03-12 03:46:11
【问题描述】:

我想以特定方式读写文件。

示例文件可以是:

name1:100

name2:400

name3:7865786

...etc etc

读取和存储这些数据并最终将其写出的最佳方法是什么? 我不知道使用哪种类型的数据结构?我对 javascript 还是很陌生。

我希望能够确定是否有任何键值匹配。 例如,如果我要添加到文件中,我可以看到 name1 已经在文件中,我只是编辑值而不是添加重复项。

【问题讨论】:

标签: javascript


【解决方案1】:

您可以使用localStorage 作为读取和写入之间的临时存储。

但是,您实际上不能使用客户端 JavaScript 随意读写用户的文件系统。但是,您可以请求用户选择要读取的文件,就像您可以请求用户将您推送的数据保存为文件一样。

localStorage 允许您将数据存储为键值对,并且可以轻松检查项目是否存在。可以选择简单地使用一个文字对象,它基本上可以做同样的事情,但只存在于内存中。 localStorage 可以保存在会话之间和页面之间导航。

// set some data
localStorage.setItem("key", "value");

// get some data
var data = localStorage.getItem("key");

// check if key exists, set if not (though, you can simply override the key as well)
if (!localStorage.getItem("key")) localStorage.setItem("key", "value");

如果密钥不存在,getItem 方法将始终返回 null。

但请注意localStorage 只能存储字符串。对于二进制数据和/或大尺寸数据,请查看 Indexed DB。

要读取文件,您必须要求用户选择一个(或多个):

HTML:

<label>Select a file: <input type=file id=selFile></label>

JavaScript

document.getElementById("selFile").onchange = function() {
  var fileReader = new FileReader();
  fileReader.onload = function() {
    var txt = this.result;
    // now we have the selected file as text.
  };
  fileReader.readAsText(this.files[0]);
};

要保存文件,您可以这样使用 File 对象:

var file = new File([txt], "myFilename.txt", {type: "application/octet-stream"});
var blobUrl = (URL || webkitURL).createObjectURL(file);
window.location = blobUrl;

使用八位字节流的原因是“强制”浏览器显示另存为对话框,而不是尝试在选项卡中显示文件,如果我们使用 text/ 就会发生这种情况普通类型。

那么,我们如何获取这些阶段之间的数据。假设您使用的是键/值方法和仅文本,您可以使用 JSON 对象。

var file = JSON.stringify(localStorage);

然后以文件 blob 的形式发送给用户。

如果数据以特定格式存在,您必须手动解析文件格式,或者如果数据与您保存的数据相同,您可以读取文件,如上所示,然后将其从字符串转换到一个对象:

var data = JSON.parse(txt);        // continue in the function block above
Object.assign(localStorage, data); // merge data from object with localStorage

请注意,您可能必须先从存储中删除项目。也有可能其他数据已经存储在那里,所以这些是需要考虑的情况,但这是一种方法的基础。

示例

// due to security reasons, localStorage can't be used in stacksnippet, 
// so we'll use an object instead
var test = {"myKey": "Hello there!"};   // localStorage.setItem("myKey", "Hello there!");

document.getElementById("selFile").onchange = function() {
  var fileReader = new FileReader();
  fileReader.onload = function() {
    var o = JSON.parse(this.result);
    //Object.assign(localStorage, o);   // use this with localStorage
    alert("done, myKey=" + o["myKey"]); // o[] -> localStorage.getItem("myKey")
  };
  fileReader.readAsText(this.files[0]);
};

document.querySelector("button").onclick = function() {
  var json = JSON.stringify(test);    // test -> localStorage
  var file = new File([json], "myFilename.txt", {type: "application/octet-stream"});
  var blobUrl = (URL || webkitURL).createObjectURL(file);
  window.location = blobUrl;
}
Save first: <button>Save file</button> (<code>"myKey" = "Hello there!"</code>)<br><br>

Then read the saved file back in:<br>
<label>Select a file: <input type=file id=selFile></label>

【讨论】:

    【解决方案2】:

    你在使用 Nodejs 吗?还是浏览器javascript?

    在任何一种情况下,你应该使用的结构都是 js 的标准对象。然后你可以像这样把它变成 JSON:

    var dataJSON = JSON.stringify(yourDataObj)
    

    使用 Nodejs,您将需要 fs 模块并使用 writeFile 或 appendFile 函数之一——这是示例代码:

    const fs = require('fs');
    fs.writeFileSync('my/file/path', dataJSON);
    

    使用浏览器js,这个stackoverflow可能会对你有所帮助:Javascript: Create and save file

    【讨论】:

    • 使用 nodejs。我真的应该提到这一点。
    【解决方案3】:

    我知道您想写入文件,但请考虑使用数据库,这样您就不必重新发明轮子。 INSERT ... ON DUPLICATE KEY UPDATE 似乎是您想要做的合乎逻辑的选择。

    【讨论】:

    • 这其实更接近我想做的事情!您能否分享有关如何从 Node 内写入 db 或 SQL 数据转储的更多详细信息?
    • 我没有在节点应用程序中做太多的数据库工作,但是我已经涉足了一点 TypeORM (typeorm.io),它已经为我完成了这项工作。
    【解决方案4】:

    出于安全原因,无法使用 JavaScript 写入客户端系统上的常规文本或类似文件。

    但是,可以使用异步 JavaScript 和 XML (AJAX) 将 XMLHttpRequest 发送到服务器上的文件,该文件是用 PHP 或 ASP 等服务器端语言编写的。

    然后服务器端文件可以写入其他文件或服务器上的数据库。

    如果您只需要在客户端系统上本地保存相对少量的数据,则 Cookie 非常有用。

    欲了解更多信息,请查看 Read/write to file using jQuery

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-15
      相关资源
      最近更新 更多