The flush() method of the FileSystemSyncAccessHandle interface persists any changes made to the file associated with the handle via the write() method to disk.
Bear in mind that you only need to call this method if you need the changes committed to disk at a specific time, otherwise you can leave the underlying operating system to handle this when it sees fit, which should be OK in most cases.
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.
The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:
- Creates a synchronous file access handle.
- Gets the size of the file and creates an
ArrayBuffer to contain it. - Reads the file contents into the buffer.
- Encodes the message and writes it to the end of the file.
- Persists the changes to disk and closes the access handle.
onmessage = async (e) => {
const message = e.data;
const root = await navigator.storage.getDirectory();
const draftHandle = await root.getFileHandle("draft.txt", { create: true });
const accessHandle = await draftHandle.createSyncAccessHandle();
const fileSize = accessHandle.getSize();
const buffer = new DataView(new ArrayBuffer(fileSize));
const readBuffer = accessHandle.read(buffer, { at: 0 });
const encoder = new TextEncoder();
const encodedMessage = encoder.encode(message);
const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });
accessHandle.flush();
accessHandle.close();
};