The Native File System API テスト

1. このページの目的

The Native File System API を使ってみる。

このページは、Origin Trials を利用して、Native File System API を利用可能にしている。

2. デモ

コード

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

3. スクリーンショット

「変更を保存しますか?」メッセージ
「このページはファイルの編集が許可されています」アイコン

4. 参考