您可以使用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>