起因

使用vscode 网页端时，很诧异为什么直接将我本地的文件直接修改了的。发现了chrome 84版本后，是支持本地文件系统api的。

示例

<button id="btn">获取</button>
<button id="btn1">保存</button>
<script>
  const btn = document.getElementById("btn");
  const btn1 = document.getElementById("btn1");
  let handle;
  let code;
  let file;
  const opts = {
    type: "saveFile",
    accepts: [
      {
        description: "Text file",
        extensions: ["txt"],
        mimeTypes: ["text/plain"],
      },
    ],
  };
  btn.onclick = async function () {
    try {
      [handle] = await showOpenFilePicker(opts);
    } catch (e) {
      if (e.message.indexOf("The user aborted a request") === -1) {
        console.error(e);
        return;
      }
    }
    if (!handle) {
      return;
    }
    // 这里的 options 用来声明对文件的权限，能否写入
    const options = {
      writable: true,
      mode: "readwrite",
    };
    // 然后向用户要求权限
    if (
      (await handle.queryPermission(options)) !== "granted" &&
      (await handle.requestPermission(options)) !== "granted"
    ) {
      alert("Please grant permissions to read & write this file.");
      return;
    }
    // 前面获取的是 FileHandle，需要转换 File 才能用
    file = await handle.getFile();
    // 接下来，`file` 就是普通 File 实例，你想怎么处理都可以，比如，获取文本内容
    code = await file.text();
  };

  btn1.onclick = async function () {
    try {
      console.log(handle);
      const writable = await handle.createWritable();
      code = `${code}\n ${code}`
      await writable.write(code);
      await writable.close();
    } catch (e) {
      if (e.message.indexOf("The user aborted a request.") === -1) {
        console.error(e);
      }
      return;
    }
  };
</script>