使用JS在本地编辑并保存文件

Question

我不知道这是否可能，但这就是我想要实现的目标。我希望能够使用文件输入加载 JSON 文件，在网页中对其进行编辑，然后将更改保存为初始文件。我知道出于安全原因，浏览器无法完全访问磁盘，但我想知道是否有办法允许更新特定文件。

简而言之，流程是

1. 加载文件
2. 编辑它
3. 保存更改（重写最初的更改）

我不关心浏览器兼容性，因此如果解决方案基于特定浏览器的 API，那么对我来说就足够了。

另外，我知道该download属性，但我试图避免“正常”下载流程（弹出窗口或抛出的文件是下载文件夹）。

提前致谢 ！

Answer 1

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>