How to estimate available storage space in a browser

Dec 16, 2020 · by Tim Kamanin

Have you ever wondered how much information you could stuff into a user's browser? I'm talking about storing objects in a browser via caches, indexedDB, localStorage, and sessionStorage.

Well, wonder no more, the following snippet will help you:

javascript

// At first, check if a browser supports 'storage' and 'estimate',
// who knows, maybe a user is on some ancient stuff.
if ('storage' in navigator && 'estimate' in navigator.storage) {

  // Estimate() method returns information about quota and used space:
  const {usage, quota} = await navigator.storage.estimate();

  // Let's see how much data is used and what's the quota.
  console.log(`Using ${usage} out of ${quota} bytes.`);

  // Calculate availabe space.
  const availableSpaceInBytes = quota - usage;

  // Convert to megabytes. There are 1024 bytes in a kilobyte, 
  // and 1024 kilobytes in a megabyte,
  const availableSpaceinMB = availableSpaceInBytes / (1024 * 1024);

  console.log(`You have ${availableSpaceinMB} megabytes available.`);
}

Numbers we get from the storage.estimate() function aren't 100% precise due to various OS restrictions and because browsers want to prevent bad user fingerprinting practices. But at least, they can give a rough idea of whether you can store that giant blob of information in a user's browser or not.