How to get free local storage quota?

Question

How to get the amount of the free quota in my applications local storage?

I need to get the remaining storage amount in bytes, kilobytes, megabytes or in percentage. Also it would be nice to get some visual display of how much free quota I have in local storage.

Thanks!

Edit: Please note that this was "answer your own guestion" style post and therefore I cannot make better guestion. Focus on the answer because the guestion is in the title and there is not much more into that.

Answer 1

Here is the JSFiddle for my cross browser (including mobile browsers) solution. Please note that you may need to allow 'unsafe' scripts in order for this to work in jsfiddle but it does not require permission in your own use. You can get the remaining local storage quota using the following code. It also alerts you if the local storage is full.

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();

});

//returns the amount of remaining free bytes in local storage quota
function getRemainingQuotaInBytes() {

    return 1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length;

}

//returns the % of free local storage quota
function getRemainingQuotaInPercent() {

    return Math.round((1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length) / (1024 * 1024 * 5) * 100);

}

//sets quota texts
function setOutputQuota() {

    $("#visualQuotaFill").css("width", parseInt($("#visualFreeQuota").css("width")) / 100 * (100 - getRemainingQuotaInPercent()) + "px");
    $("#quotaOutputText").text(Math.round(getRemainingQuotaInBytes() / 1000) + " KB free in your local storage");
    $("#quotaOutputPercentText").text(getRemainingQuotaInPercent() + " % of the quota free in your local storage");

}