DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
hemanth.hm
hemanth.hm

Posted on

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;
};
Enter fullscreen mode Exit fullscreen mode

Usage:

Checks for storage API existence.

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

Enter fullscreen mode Exit fullscreen mode

Create an stroageManager instance.

const storageManager = hasStorage && navigator.storage;
Enter fullscreen mode Exit fullscreen mode

Estimate the available storage space.


const estimate = await storageManager.estimate();

/*
Would give us something like:

{
  quota: 32571287142, 
  usage: 3351594
}
*/
Enter fullscreen mode Exit fullscreen mode

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.
*/

Enter fullscreen mode Exit fullscreen mode
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.

*/

Enter fullscreen mode Exit fullscreen mode

GIF FTW!

navigator.storage.gif

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.