起因

使用vscode 網(wǎng)頁端時(shí)，很詫異為什么直接將我本地的文件直接修改了的。發(fā)現(xiàn)了chrome 84版本后，是支持本地文件系統(tǒng)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 用來聲明對文件的權(quán)限，能否寫入
    const options = {
      writable: true,
      mode: "readwrite",
    };
    // 然后向用戶要求權(quán)限
    if (
      (await handle.queryPermission(options)) !== "granted" &&
      (await handle.requestPermission(options)) !== "granted"
    ) {
      alert("Please grant permissions to read & write this file.");
      return;
    }
    // 前面獲取的是 FileHandle，需要轉(zhuǎn)換 File 才能用
    file = await handle.getFile();
    // 接下來，`file` 就是普通 File 實(shí)例，你想怎么處理都可以，比如，獲取文本內(nèi)容
    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>