Repository files navigation

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

Please read the ZenFS core documentation!

• 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.

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);

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

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

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!');

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);

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.