純粋なフロントエンドのファイルの読み書き?

実際のところ、vscode オンラインバージョンでは実際にファイルディレクトリとファイルを開いたり、ファイルを保存したりできることがわかりました。

互換性は現在一般的に谷歌 edge Operaサポートされていますが、その他はサポートされていません

https://vscode.dev/

MDN を確認したところ、新しい API が追加されていることがわかりました

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showDirectoryPicker

showディレクトリピッカー

これは実験的な技術であり、将来のバージョンで変更される可能性がありますが、ディレクトリ セレクターを表示し、Promise を返す機能です。

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    
    
showDirectoryPicker().then(async (dir) => {
    
    
  const recursion = async (dir) => {
    
    
    if (dir.entries) {
    
    
      const dirs = dir.entries();
      for await (let item of dirs) {
    
    
        item.forEach((file) => {
    
    
          if (typeof file === "string") {
    
    
            const p = document.createElement("p");
            p.innerText = file;
            p.style.marginLeft = "10px";
            document.querySelector(".result").appendChild(p);
          } else {
    
    
            recursion(file);
          }
        });
      }
    }
  };
  recursion(dir);
 });
});

選択したディレクトリ内のすべてのファイルを取得して展開します

showOpenFilePicker

文件showOpenFilePicker API は、ディレクトリではないユーザーの選択を返します。デフォルトの 1 つの選択をmultiple複数の選択に設定できます。

      btn.addEventListener("click", () => {
    
    
        showOpenFilePicker().then(async (file) => {
    
    
          console.log(await file[0].getFile());
        });
      });

getFile を呼び出して File オブジェクトを返すことができます。このオブジェクトは、入力ファイルによって返されるオブジェクトと同じであり、操作できます。

showSaveFilePicker

showSaveFilePicker この API はファイルを書き込んで Promise を返すことができます

showSaveFilePicker().then(file=>{
    
    
  console.log(file);
})