StorageManager: getDirectory() method
Baseline2023Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
Note: This feature is available inWeb Workers.
ThegetDirectory() method of theStorageManager interface is used to obtain a reference to aFileSystemDirectoryHandle object allowing access to a directory and its contents, stored in theorigin private file system (OPFS).
Syntax
getDirectory()Parameters
None.
Return value
APromise that fulfills with aFileSystemDirectoryHandle object.
Exceptions
SecurityErrorDOMExceptionThrown 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.UnknownErrorDOMExceptionThrown 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:
- Gets a
FileSystemDirectoryHandlerepresenting the root of the OPFS usinggetDirectory(), storing it in therootvariable. - Gets a file handle using
FileSystemDirectoryHandle.getFileHandle(). - Creates a synchronous file access handle using
FileSystemFileHandle.createSyncAccessHandle(). - Gets the size of the file and creates an
ArrayBufferto contain it. - Reads and writes to the file.
- Persists the changes to disk and closes the synchronous access handle.
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(), andtruncate() 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 |