List all `navigator.storage` files / Clear storage cache

Question

I store multiple large assets in navigator.storage, to avoid large downloads.

With it, I would like to do the following as well:

1. "List" - to show all the saved files
2. "Clear cache" - to delete all files saved to navigator.storage

I could not find a method to perform either.

Alternatives attempted

I have attempted to store the files directory in localStorage, however, this information can be cleared without the files being removed, and the user ends up with inflated storage use for unknown documents.

Answer 1

With localStorage you can easily add and remove datas:

function addToStorage() {
  localStorage.setItem('bgcolor', 'red');
  localStorage.setItem('font', 'Helvetica');
  localStorage.setItem('image', 'mydog.png');
}

function clearStorage() {
  localStorage.clear();
}

function removeStorageItem(item) {
  localStorage.removeItem(item);

}

addToStorage();
removeStorageItem('image');
clearStorage();

Answer 2

navigator.storage is not a storage location, which your question seems to imply. Rather, it is a storage manager that you can use to request that data be persisted, using navigator.storage.persist(). That method will persist data in the following stores:

• Cache API
• Cookies
• DOM Storage (Local Storage)
• File System API (browser-provided and sandboxed file system)
• IndexedDB
• Service workers

See the "Persistent Storage" article on web.dev for more info.