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

Question

我不知道是否有可能，但以下是我的想法。我想使用文件输入来加载JSON文件，在网页上进行编辑，并将更改保存到初始文件中。出于安全原因，我知道浏览器无法完全访问磁盘，但我想知道是否有一种方式允许特定文件的更新。

简而言之，流程如下：

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

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

此外，我知道`download`属性，但我试图避免“正常”的下载流程（弹出窗口或将文件扔到Downloads文件夹中）。

提前感谢！

- Pascal Boutin

---

我知道download属性，但我试图避免“正常”的下载流程。这是否要求不使用download属性？或者不使用“保存文件”对话框？文件应该如何保存？请参见http://stackoverflow.com/questions/30563157/edit-save-self-modifying-html-document-format-generated-html-javascript - guest271314

这是供公众使用的东西，还是只为你个人使用的？ - Matt Way

“文件应该以什么方式保存？”就像 MS Word 中的“保存”按钮一样。我想要保存到最初加载的文件中。把它想象成“另存为”和“保存”之间的区别。暂时只是为了我自己使用，但如果我能让它工作起来，那么分享出去也是不错的 :) - Pascal Boutin

@PascalBoutin 你试过在链接中使用 html 和 js 吗？需求应该可以通过使用 input type="text" 或 textarea、input type="file" 元素来实现。 - guest271314

我知道保存过程可以通过保存对话框完成，但我现在正在探索的是在我的应用程序中同时拥有“保存”和“另存为”的可能性，而不仅仅是“另存为”。 - Pascal Boutin

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>

- guest271314

---

这是最接近我想要实现的，但它没有重写初始文件。如果根本不可能，您的解决方案将被接受... 最初，它更像是一个“探索”问题。 - Pascal Boutin

但它没有重写初始文件。"保存文件"对话框可能会在原始文件名后附加"(1)"，以防止用户覆盖文件，但可以在"保存文件"对话框中删除。在从潜在文件名中删除"(1)"后，用户可能会再次收到提示："文件名为"abc.json"的文件已经存在。该文件已经存在于"文件夹"中。替换它将覆盖其内容。"为了防止用户错误地覆盖文件？如果在过程中保持打开编辑器，则单击"保存"时，编辑的文件应同时更新编辑器和文件系统。 - guest271314

Answer 2

考虑研究FileSystem。目前仅在Chrome中支持，其他浏览器不太可能支持。

- Lance Harper

---

如果我理解正确的话，这就像是一个“虚拟”的文件系统。有没有办法在该文件系统中加载物理文件？ - Pascal Boutin

Answer 3

本地存储？它可以存储键值对，这些键值对将在浏览器之间持久存在-变量限制，但是Chrome、Firefox、Safari、Opera和IE都支持这个基本思想。 事物被存储为字符串，因此您可以将json类型的信息作为值存储，而不是将您的json分成许多键/值项。

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

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

- Matiu Carr

---

我想编写一种在线编辑器，我认为每次用户想要保存进度时提示保存对话框会非常烦人，但我同意LocalStorage可能是一个高效的缓冲区，在运行时是不会崩溃的。 - Pascal Boutin