ZenFS DOM

ZenFS DOM Backends

ZenFS backends for DOM APIs. DOM APIs areonly available natively in browsers.

Please read the ZenFS core documentation!

Backends

• WebStorage stores files in aStorage object, likelocalStorage andsessionStorage.
• IndexedDB stores files into anIndexedDB object database.
• WebAccess uses theFile System Access API.
• XML uses anXMLDocument to store files, which can be appended to the DOM.

For more information, see theAPI documentation.

Usage

You can use the backends from@zenfs/dom just like the backends from@zenfs/core:

import {configure,fs }from'@zenfs/core';
import {WebStorage }from'@zenfs/dom';

awaitconfigureSingle({backend:WebStorage,storage:localStorage });

if (!fs.existsSync('/test.txt')) {
fs.writeFileSync('/test.txt','This will persist across reloads!');
}

constcontents =fs.readFileSync('/test.txt','utf-8');
console.log(contents);Copy

XML

TheXML backend can be used to create a file system which lives in the DOM:

<!-- ... -->
<fs />
<!-- ... -->Copy

import {configure,fs }from'@zenfs/core';
import {XML }from'@zenfs/dom';

awaitconfigureSingle({
backend:XML,
root:document.querySelector('fs'),// root is optional
});

fs.writeFileSync('/test.txt','This is in the DOM!');Copy

If you choose to add the root element to the DOM by appending it, you will likely want to hide its contents (display:none works well).

Theroot option is not required. If you choose not to pass in aroot, you can always append it to the DOM later:

import {configure,fs,mounts }from'@zenfs/core';
import {XML }from'@zenfs/dom';

awaitconfigureSingle({backend:XML });

const {root } =mounts.get('/');

document.body.append(root);Copy

This may disrupt use cases that involve saving the HTML file locally and loading it later, since a new element is created when configuring. In contrast, when using an existing element and passing in aroot, the existing element's contents will be preserved.