Question

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

简而言之，流程将是

加载文件
编辑
保存更改（重写初始更改）

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

此外，我知道download属性，但我试图避免＆＃34;正常＆＃34;下载流程（弹出窗口或正在抛出的文件是Downloads文件夹）。

提前致谢！

Answer 1

＆＃13;

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

＆＃13;

textarea {
  white-space: pre;
  width: 400px;
  height: 300px;
}

＆＃13;

<form>
  <input type="file" />
  <br />
  <textarea></textarea>
  <br />
  <input type="button" disabled="true" value="Save" />
</form>

＆＃13;

Answer 2

考虑研究FileSystem。它目前只在Chrome中使用，不太可能在其他浏览器中受支持。

Answer 3

区域存储？存储关键值对，这些关键值对将持续存在 - 跨浏览器的可变限制，但Chrome，Firefox，Safari，Opera，IE支持这一总体思路。事物存储为字符串，因此您可以将json类型信息存储为值，而不是将json分解为许多键/值项。

这不是最安全的方法，但如果您不介意客户端可能会调整值，那么对于首选项甚至应用程序状态可能会很好。

如果用户想要保存，请调用下载/保存文件选项。

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

3 个答案: