如何让用户保存文件并仅在浏览器Javascript中编辑该文件？

我相信这是不可能的，因为安全原因，如StackOverflow中所述。然而，当我在使用Diagram应用程序时，我意识到他们可以要求我保存一个文件，并以某种方式保留该文件引用。每当我在应用程序上单击“保存”时，我的硬盘上的本地文件都会更改（无新下载）

我知道只能上传/下载一个文件，并且相信你不能编辑它（使用Blob和FileReader等）。他们如何做到这一点？该应用程序是开源的，但不幸的是，我仍然无法找到他们使用的API。我不记得在我的浏览器中安装了任何插件或应用程序

我还注意到在我的浏览器中有这个权限，所以我猜这是一些标准API，但即使使用它作为关键字，都会导致StackOverflow文章说这是不可能的

---

这是我不知道的新API吗？我在寻找什么？

您可以使用

localStorage

来实现这一点，而无需用户的任何其他许可

localStorage.setItem（“数据”，JSON.stringify（数据））

如果您的数据只是JSON，那么这就行了，但是如果您有自定义数据类型，您可以查看一下

编辑：

由于您希望将文件直接保存到设备并对其进行编辑，因此可以查看文件系统访问API。本文对此进行了解释

您可以先使用

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

一旦你有了文件句柄，你应该能够写入文件，而无需每次有更改时请求下载新文件

async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

这些代码来自我上面链接的文章，这篇文章非常清楚地解释了一切。值得一读。
你是说FileSaver.js吗？localStorage是您可以尝试执行此操作的另一种方式，即，
localStorage
不创建物理文件，也不让用户选择文件所在的位置。他们在硬盘上创建真正的文件（即
test.drawio
是一个XML文本文件）关于FileSaver.js我不确定，但快速查看一下他们的API，看起来他们唯一的功能是创建和下载一个文件，而不是编辑它们？但是我可能错了。使用FileSaver.js如果加载了文件并进行了更改，则可以使用FileSaver.js（通过“保存”对话框）将这些更改保存回文件系统。这与您看到的行为匹配吗？不确定是否相同，但我尝试了他们的一些演示页面，所有页面都只是使用浏览器的设置保存，我可以使用标准Javascript实现这些设置。此外，权限也没有像上面的屏幕截图那样显示。不，
localStorage
不会创建物理文件或让用户选择它所在的位置。它们在硬盘上创建真实文件（即test.drawio是一个XML文本文件）。另外，
localStorage
在大多数浏览器上也有5MB的限制。您看过文件系统访问API吗？啊，是的，它是文件系统API。可以确认它具有相同的行为。现在我注意到它在Firefox中不起作用。对于在Firefox上运行的应用程序，它们返回默认浏览器行为（即保存时新下载）。