StorageManager: getDirectory() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Web Workers.

The getDirectory() method of the StorageManager interface is used to obtain a reference to a FileSystemDirectoryHandle object allowing access to a directory and its contents, stored in the origin private file system (OPFS).

Syntax

js
getDirectory()

Parameters

None.

Return value

A Promise that fulfills with a FileSystemDirectoryHandle object.

Exceptions

SecurityError DOMException

Thrown if the browser is not able to map the requested directory to the local OPFS, for example due to storage or memory constraints. Also thrown in some browsers if getDirectory() is called in private browsing mode.

UnknownError DOMException

Thrown in some browsers if getDirectory() is called in private browsing mode.

Examples

The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:

  1. Gets a FileSystemDirectoryHandle representing the root of the OPFS using getDirectory(), storing it in the root variable.
  2. Gets a file handle using FileSystemDirectoryHandle.getFileHandle().
  3. Creates a synchronous file access handle using FileSystemFileHandle.createSyncAccessHandle().
  4. Gets the size of the file and creates an ArrayBuffer to contain it.
  5. Reads and writes to the file.
  6. Persists the changes to disk and closes the synchronous access handle.
js
onmessage = async (e) => {
  // Retrieve message sent to work from main script
  const message = e.data;

  // Get handle to draft file
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // Get size of the file.
  const fileSize = accessHandle.getSize();
  // Read file content to a buffer.
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // Write the message to the end of the file.
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // Persist changes to disk.
  accessHandle.flush();

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
};

Note: In earlier versions of the spec, close(), flush(), getSize(), and truncate() were wrongly specified as asynchronous methods, and older versions of some browsers implement them in this way. However, all current browsers that support these methods implement them as synchronous methods.

Specifications

Specification
File System
# dom-storagemanager-getdirectory

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getDirectory
Chrome – Full support
Chrome 86 (Release date: 2020-10-20)
footnote Full support
Edge – Full support
Edge 86 (Release date: 2020-10-09)
footnote Full support
Firefox – Full support
Firefox 111 (Release date: 2023-03-14)
footnote Full support
Opera – Full support
Opera 72 (Release date: 2020-10-21)
footnote Full support
Safari – Full support
Safari 15.2 (Release date: 2021-12-13)
footnote Full support
Chrome Android – Full support
Chrome Android 109 (Release date: 2023-01-10)
footnote Full support
Firefox for Android – Full support
Firefox for Android 111 (Release date: 2023-03-14)
footnote Full support
Opera Android – Full support
Opera Android 74 (Release date: 2023-03-13)
footnote Full support
Safari on iOS – Full support
Safari on iOS 15.2 (Release date: 2021-12-13)
footnote Full support
Samsung Internet – Full support
Samsung Internet 21 (Release date: 2023-05-19)
footnote Full support
WebView Android – Full support
WebView Android 109 (Release date: 2023-01-10)
footnote Full support
WebView on iOS – Full support
WebView on iOS 15.2 (Release date: 2021-12-13)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also