JavaScriptHave 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.
Hey, if you've found this useful, please share the post to help other folks find it:
There's even more:
Subscribe for updates
- via Twitter: @timonweb
- old school RSS:
- or evergreen email → → →↓ ↓ ↓