如何获得免费的本地存储配额？

Question

如何在我的应用程序本地存储中获取免费配额？

我需要以字节，千字节，兆字节或百分比形式获取剩余存储量。另外，我可以直观地看到我在本地存储空间中有多少免费配额。

谢谢！

编辑：请注意，这是“回答你自己的猜测”风格的帖子，因此我无法做出更好的猜测。专注于答案，因为猜测在标题中并且没有更多内容。

Answer 1

以下是我的跨浏览器（包括移动浏览器）解决方案的JSFiddle。 请注意，您可能需要允许＆＃39;不安全＆＃39;脚本，以便在jsfiddle中工作，但它不需要您自己使用的权限。您可以使用以下代码获取剩余的本地存储配额。如果本地存储空间已满，它还会提醒您。

<强> 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");

}