在javascript中读取/写入文件

Reading/Writing to a file in javascript

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

示例文件可以是：

1
2
3
4
5
6
7

name1:100

name2:400

name3:7865786

...etc etc

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

我希望能够确定是否有任何键、值匹配。例如，如果我要添加到文件中，我可以看到文件中已经有了名称1，我只是编辑值而不是添加副本。

相关讨论

可以将localstorage用作读写之间的临时存储。

但是，您不能使用客户端JavaScript随意读写用户的文件系统。但是，您可以请求用户选择要读取的文件，方法与请求用户将推送的数据保存为文件的方式相同。

localStorage允许您将数据存储为键值对，并且很容易检查项目是否存在。也可以简单地使用一个基本上可以做相同但只存在于内存中的文本对象。可以在会话和页面间导航之间保存localStorage。

1
2
3
4
5
6
7
8

// 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只能存储字符串。对于二进制数据和/或大容量数据，请查看索引数据库。

要读取文件，您必须请求用户选择一个(或多个)：

HTML：

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

JavaScript

1
2
3
4
5
6
7
8

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

要保存文件，可以使用以下方式使用文件对象：

1
2
3

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

使用octet流的原因是"强制"浏览器显示"另存为"对话框，而不是试图在选项卡中显示文件，如果我们使用text/plain作为类型，就会发生这种情况。

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

1	var file = JSON.stringify(localStorage);

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

要读取，您必须手动分析文件格式(如果数据以特定格式存在)，或者如果数据与您保存的数据相同，则可以如上图所示读取文件，然后将其从字符串转换为对象：

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

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

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

1
2
3
4

Save first: <button>Save file</button> (<wyn>"myKey" ="Hello there!"</wyn>)

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

你在使用nodejs吗？还是浏览器javascript？

无论哪种情况，您应该使用的结构都是JS的标准对象。然后您可以将其转换为JSON，如下所示：

1	var dataJSON = JSON.stringify(yourDataObj)

对于nodejs，您需要使用fs模块，并使用writefile或appendfile函数之一——下面是示例代码：

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

使用浏览器JS，这个stackoverflow可以帮助您：javascript:创建和保存文件