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

【问题标题】：Edit and save a file locally with JS用JS在本地编辑和保存文件
【发布时间】：2015-12-02 03:38:00
【问题描述】：

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

简而言之，流程是

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

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

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

提前致谢！

【问题讨论】：

“另外，我知道download 属性，但我试图避免“正常”下载流程“ 要求不使用download 属性? ，或“保存文件”对话框？将如何或应该如何保存文件？见stackoverflow.com/questions/30563157/…
这是供公众使用的东西，还是仅供您个人使用？
"如何或应该如何保存文件" 例如，在 MS Word 中，“保存”按钮的工作方式相同。我想保存在最初加载的文件中。将其视为“另存为”和“保存”之间的区别。目前只对我来说，但如果我能让它工作，很高兴能够分享它:)
@PascalBoutin 在链接中尝试过html、js？要求应该可以使用 input type="text" 或 textarea ， input type="file" 元素
嗯，我知道保存过程可以通过保存对话框来完成，我现在正在探索的是，在我的应用程序中是否可以同时具有“保存”和“另存为”，不仅仅是“另存为”。

标签： javascript html

【解决方案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>

【讨论】：

这是最接近我想要实现的目标，但它不会重写初始文件。如果根本不可能，您的解决方案将被接受......最初，它更像是一个“探索”问题
"但它没有重写初始文件" ? “保存文件”对话框可能会在原始文件名后附加(1)，可能是为了防止用户覆盖文件，同时可以在“保存文件”对话框中删除。从预期文件名中删除 (1) 后，可能会再次提示用户 "A file named "abc.json" already exists. The file already exists in "folder". Replacing it will overwrite its contents." 。防止用户错误地覆盖文件？如果在处理过程中保持打开的编辑器，当点击“保存”时，编辑器和文件系统都应该更新编辑的文件

【解决方案2】：

考虑调查FileSystem。目前仅在 Chrome 中提供，其他浏览器不太可能支持。

【讨论】：

如果我理解得很好，它就像一个“虚拟”文件系统。有没有办法在该文件系统中加载物理文件？

【解决方案3】：

语言环境存储？存储跨浏览器将持续存在变量限制的键值对，但 Chrome、Firefox、Safari、Opera、IE 支持一般想法。事物存储为字符串，因此您可以将 json 类型信息存储为值，而不是将 json 分解为许多键/值项。

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

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

【讨论】：

我想编写某种在线编辑器，我认为每次用户想要保存进度时都向用户提示保存对话框会很烦人，但我同意 LocalStorage 可以在运行时是一个有效的缓冲区，可以防崩溃。