JSFiddle - React, Tailwind, and code Playground
HTML
<div>
Your localStorage limit is <span id="size">???</span> KBs.
</div>
JavaScript
// Determine size of localStorage if it's not set
const resolution = 100,
MIN = 100,
MAX = 80000;
localStorage.removeItem('localStorage-size');
if (!localStorage.getItem('localStorage-size'))
{
var str1024x = new Array(1024+1).join(new Array(resolution+1).join('a'));
localStorage.removeItem('test');
var min = MIN / resolution, max = MAX / resolution, lastUsed;
while (max - min > 1) {
var i = Math.floor((min + max) / 2);
console.log(i);
try {
var str = new Array(i+1).join(str1024x);
localStorage.setItem('test', str);
lastUsed = i;
min = i;
} catch (e) {
max = i;
}
}
localStorage.removeItem('test');
localStorage.setItem('localStorage-size', lastUsed * resolution);
}
var el = document.getElementById('size');
el.innerHTML = localStorage.getItem('localStorage-size');