How to estimate available storage space in a browser
Dec 16, 2020 · by Tim KamaninHave 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:
// 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.