Dec 16, 2020 · Updated: May 01, 2023 · by Tim Kamanin
Have you ever wondered how much information you could store 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 being used and what the quota is.
console.log(`Using ${usage} out of ${quota} bytes.`);
// Calculate available 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.
Hey, if you've found this useful, please share the post to help other folks find it: