file system access apiで読み込んだディレクトリのハンドルを保存したい

今、JavaScriptで、かんたんなテキストエディタを作ろうとしています。file system access apiというAPIを使ってフォルダをアップロードし、そのフォルダの中のtxtファイルを編集するというものです。一応このようなコードが完成しました。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>テキストエディタ</title>
6  </head>
7  <body>
8    <h1>テキストエディタ</h1>
9    <p>フォルダをアップロードし、そのフォルダ内にあるテキストファイルを編集するアプリです(txtファイルしか編集できません)</p>
10    <div id="inuploadbutton"><button id="upload">フォルダをアップロード</button></div>
11    <script src="wordpad.js" charset="utf-8"></script>
12    <div id="other"></div>
13  </body>
14</html>

JavaScript
1var uploadButton = document.getElementById("upload");
2uploadButton.addEventListener("click",
3async (e)=>{
4  var dirHandle = await window.showDirectoryPicker();
5
6  const file = await dirHandle.getFileHandle(window.prompt("編集したいファイルの名前をファイル拡張子名も含めて入力してください※txtファイルしか読み込めません"));
7
8  fileData = await file.getFile();
9  var text = await fileData.text();
10  document.getElementById("other").innerHTML = '<textarea id="content" name="content" rows="5" cols="33">' + text + '</textarea> <button id="save">保存</button>';
11  document.getElementById("inuploadbutton").innerHTML = "";
12
13  var saveButton = document.getElementById("save");
14  saveButton.addEventListener("click",
15    async (e)=>{
16      const sampleConfig = document.getElementById("content").value;
17
18      const blob = new Blob([sampleConfig], {
19        type: "text/plain"
20      });
21
22      const writableStream = await file.createWritable();
23      await writableStream.write(blob);
24      await writableStream.close();
25      window.alert("保存しました。 ");
26      window.close();
27  });
28});

しかし、これではアプリを開くたびにフォルダをアップロードする必要があります。それは嫌なので、JavaScriptの4行目にある「window.showDirectoryPicker();」が返す、ディレクトリのデータが入っているオブジェクトをどこかに保存したいと考えています(もちろんブラウザを閉じてもデータが消えないところに)。オブジェクトをブラウザを閉じてもデータが消えないように保存できるAPIはありますか?