javascript 使用JS在本地编辑并保存文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34034475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Edit and save a file locally with JS
提问by Pascal Boutin
I don't know if it's possible but here's what I would like to achieve. I would want to be able to load a JSON file using a file input, edit it in a web page and then save the changes is the initial file. I know that for security reason the browser doesn't have full access to the disk but I was wondering if there was a way to allow updates for a specific file.
我不知道这是否可能，但这是我想要实现的目标。我希望能够使用文件输入加载 JSON 文件，在网页中编辑它，然后保存更改是初始文件。我知道出于安全原因，浏览器无法完全访问磁盘，但我想知道是否有办法允许更新特定文件。
In a nutshell, the flow would be
简而言之，流程是
- Load the file
- Edit it
- Save the changes (rewriting the initial one)
- 加载文件
- 编辑它
- 保存更改（重写最初的更改）
I don't care about browser compatibility, so if the solution is based on a specific brower's API, it's good enough for me.
我不关心浏览器兼容性，所以如果解决方案是基于特定浏览器的 API，对我来说就足够了。
Also, I know about the downloadattribute, but I'm trying to avoid the "normal" download flow (popup or the file being thrown is the Downloads folder).
此外，我知道该download属性，但我试图避免“正常”下载流程（弹出或抛出的文件是下载文件夹）。
Thanks in advance !
提前致谢 ！
采纳答案by guest271314
var input = document.querySelector("input[type=file]");
var text = document.querySelector("textarea");
var button = document.querySelector("input[type=button]");
var name;
input.onchange = function(e) {
var reader = new FileReader();
reader.onload = function(event) {
text.value = event.target.result;
button.disabled = false;
}
name = e.target.files[0].name;
reader.readAsText(new Blob([e.target.files[0]], {
"type": "application/json"
}));
}
button.onclick = function(e) {
e.preventDefault();
var blob = new Blob([text.value], {
"type": "application/json"
});
var a = document.createElement("a");
a.download = name;
a.href = URL.createObjectURL(blob);
document.body.appendChild(a);
a.click();
text.value = "";
input.value = "";
button.disabled = true;
document.body.removeChild(a);
}textarea {
white-space: pre;
width: 400px;
height: 300px;
}<form>
<input type="file" />
<br />
<textarea></textarea>
<br />
<input type="button" disabled="true" value="Save" />
</form>回答by Lance Harper
Consider looking into FileSystem. It's only in Chrome at present and not likely to be supported in other browsers.
考虑调查FileSystem. 目前仅在 Chrome 中支持，其他浏览器可能不支持。
回答by Matiu Carr
Locale storage? Stores key value pairs that will persist -variable limitations across browsers, but the general idea is supported by Chrome, Firefox, Safari, Opera, IE. Things are stored as strings, so you could store json type information as a value, rather than breaking your json into lots of key/value items.
区域存储？存储将在浏览器间保持变量限制的键值对，但 Chrome、Firefox、Safari、Opera 和 IE 支持总体思路。事物存储为字符串，因此您可以将 json 类型信息存储为值，而不是将 json 分解为许多键/值项。
This is not the most secure way of doing this, but would probably be fine for preferences and even application state, if you don't mind there being a potential for something client side to tweak values.
这不是执行此操作的最安全方法，但如果您不介意客户端调整值的可能性，则可能适用于首选项甚至应用程序状态。
If a user wants to save this, then you invoke the download/save file option.
如果用户想要保存它，则调用下载/保存文件选项。
