navigator.storage

navigator.storage is a read-only property that returns a singleton StorageManager that will help use fetch the overall storage capabilities of the browser for the current context.

StorageManager helps us to estimate how much more space is available for local storage, it also helps to configure persistence of data stores.

IDL:

[SecureContext,
 Exposed=(Window,Worker)]
interface StorageManager {
  Promise<boolean> persisted();
  [Exposed=Window] Promise<boolean> persist();

  Promise<StorageEstimate> estimate();
};

dictionary StorageEstimate {
  unsigned long long usage;
  unsigned long long quota;
};

Usage:

Checks for storage API existence.

const hasStorage = navigator.storage;
const hasPersist = hasStorage && navigator.storage.persist;

Create an stroageManager instance.

const storageManager = hasStorage && navigator.storage;

Estimate the available storage space.

const estimate = await storageManager.estimate();

/*
Would give us something like:

{
  quota: 32571287142, 
  usage: 3351594
}
*/

Can persist?

const canPersist = hasPersist && await navigator.storage.persist();

// ^ Will be true of false.

/*

true -> Storage will not be cleared until explicitly cleared. 

false -> Storage might be cleared based on UA need.
*/

const persisted = hasPersisted && await navigator.storage.persisted();

/*

true -> box mode is persistent for the site's storage.

A box, the primitive these APIs store their data in.
A way of making that box persistent.
A way of getting usage and quota estimates for an origin.

*/

GIF FTW!

GIF