JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Remaining local storage quota</h2>

<p id="quotaOutputText"></p>
<p id="quotaOutputPercentText"></p>

<div id="visualFreeQuota"><div id="visualQuotaFill"></div></div>

<br/>

<button id="getQuota">Get free quota visually</button><button id="fillQuota">Fill quota by 900 KB</button><button id="clearLocalStorage">Clear local storage</button>

CSS

#visualFreeQuota{
    
    height: 20px;
    width: 390px;
    border: 1px solid black;
    visibility: hidden;
    
}

#visualQuotaFill {
    
    background-color: #000000;
    height: 20px;
    width: 0px;
    
}

JavaScript

$(document).ready(function() {
    
    //"Get free quota visually" button's functionality
    $("#getQuota").click(function() {
        
        $("#visualFreeQuota").css("visibility","visible");
        $("#getQuota").prop("disabled", true); //disables the button in order to prevent browser slowing down because of button spam (cannot spam 900 KB of data in local storage with good performance)
    
    });
    
    //"Fill quota by 900 KB" button's functionality
    $("#fillQuota").click(function() {
        
        $("#fillQuota").prop("disabled", true);
        var fillData = "";
        
        if(localStorage.getItem("filledQuota")) {
        
            fillData = localStorage.getItem("filledQuota");
        
        }
        
        //Fills local storage by 900 KB
        for(var i = 0; i < 1000001; i++) {
            
            fillData += "add9bytes"; //adds 9 bytes of data in the variable
            
            if(i === 100000) {
            
                try {
                
                    localStorage.setItem("filledQuota", fillData); //saves data to local storage only once in this loop for increased performance
                
                }catch(e) {
                    
                    //Alerts the user if local storage does not have enough free space
                    alert("Local storage does not have free 900 KB!"); 
                
                };
                
            }
            
        }
        
        setOutputQuota();
        
        setTimeout(function() {
            
            $("#fillQuota").prop("disabled", false);
        
        }, 500);

    }); //"Fill quota by 900 KB" button's functionality end
    
    //"Clear local storage" button's functionality
    $("#clearLocalStorage").click(function() {
    
        localStorage.clear();
        setOutputQuota();
    
    });

    //Sets free local storage quota on document.ready when no buttons are yet pressed
    setOutputQuota();
   ...