The Native File System API テスト

Open file Save file

コード

JavaScript

let fileHandle;
const elmBtnOpenFile = document.querySelector('#btnOpenFile');
const elmBtnSaveFile = document.querySelector('#btnSaveFile');
const elmOutCanvas = document.querySelector('#canvas');

elmBtnOpenFile.addEventListener('click', async (e) => {
  fileHandle = await window.chooseFileSystemEntries();
  // FileSystemFileHandle オブジェクトが返ってくる

  const file = await fileHandle.getFile();
  const contents = await file.text();
  elmOutCanvas.textContent = contents;
});

elmBtnSaveFile.addEventListener('click', async (e) => {
  //Create a writer (request permission if necessary).
  const writer = await fileHandle.createWriter();
  // Make sure we start with an empty file
  await writer.truncate(0);
  // Write the full length of the contents
  await writer.write(0, elmOutCanvas.value);
  // Close the file and write the contents to disk
  await writer.close();
});

（引用元：New in Chrome 78  |  Web  |  Google Developers）