Javascript 如何获得免费的本地存储配额？
如何获取我的应用程序本地存储中的可用配额 我需要以字节、千字节、兆字节或百分比获取剩余存储量。另外，如果能直观地显示我在本地存储中有多少可用配额，那也太好了 谢谢 编辑：请注意，这是“回答你自己的问题”风格的帖子，因此我无法做出更好的问题。把注意力集中在答案上，因为问题在标题中，没有更多的内容。 下面是我的跨浏览器（包括移动浏览器）解决方案的示例请注意，您可能需要允许“不安全”脚本才能在JSFIDLE中工作，但在您自己使用时不需要权限。您可以使用以下代码获得剩余的本地存储配额。如果本地存储已满，它还会提醒您 HTMLJavascript 如何获得免费的本地存储配额？,javascript,jquery,html,local-storage,quota,Javascript,Jquery,Html,Local Storage,Quota,如何获取我的应用程序本地存储中的可用配额 我需要以字节、千字节、兆字节或百分比获取剩余存储量。另外，如果能直观地显示我在本地存储中有多少可用配额，那也太好了 谢谢 编辑：请注意，这是“回答你自己的问题”风格的帖子，因此我无法做出更好的问题。把注意力集中在答案上，因为问题在标题中，没有更多的内容。 下面是我的跨浏览器（包括移动浏览器）解决方案的示例请注意，您可能需要允许“不安全”脚本才能在JSFIDLE中工作，但在您自己使用时不需要权限。您可以使用以下代码获得剩余的本地存储配额。如果本地存储已满，
<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>
$(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");
}
$（文档）.ready（函数（）{
//“直观获取免费配额”按钮的功能
$（“#获取配额”）。单击（函数（）{
$（“#visualFreeQuota”）.css（“可见性”、“可见”）；
$（“#getQuota”）.prop（“disabled”，true）；//禁用该按钮，以防止浏览器因按钮垃圾邮件而变慢（无法以良好性能垃圾邮件发送本地存储中的900 KB数据）
});
//“按900 KB填充配额”按钮的功能
$（“#fillQuota”）。单击（函数（）{
$（“fillQuota”）.prop（“disabled”，true）；
var fillData=“”；
if（localStorage.getItem（“filledQuota”））{
fillData=localStorage.getItem（“filledQuota”）；
}
//将本地存储空间填充900 KB
对于（变量i=0；i<1000001；i++）{
fillData+=“add9bytes”；//在变量中添加9字节的数据
如果（i==100000）{
试一试{
setItem（“filledQuota”，fillData）；//在这个循环中只将数据保存到本地存储一次，以提高性能
}捕获（e）{
//如果本地存储没有足够的可用空间，则向用户发出警报
警报（“本地存储没有可用的900 KB！”）；
};
}
}
setOutputQuota（）；
setTimeout（函数（）{
$（“#fillQuota”）.prop（“disabled”，false）；
}, 500);
})；//“按900 KB填充配额”按钮的功能结束
//“清除本地存储”按钮的功能
$（“#clearLocalStorage”）。单击（函数（）{
localStorage.clear（）；
setOutputQuota（）；
});
//设置document.ready上的可用本地存储配额（在尚未按下任何按钮时）
setOutputQuota（）；
});
//返回本地存储配额中剩余的可用字节数
函数getRemainingQuotaInBytes（）{
返回1024*1024*5-unescape（encodeURIComponent（JSON.stringify（localStorage）））.length；
}
//返回可用本地存储配额的百分比
函数getRemainingQuotaInPercent（）{
返回Math.round（（1024*1024*5-unescape（encodeURIComponent（JSON.stringify（localStorage）））.length）/（1024*1024*5）*100）；
}
//设置配额文本
函数setOutputQuota（）{
$（“visualQuotaFill”）.css（“宽度”，parseInt（$（“visualFreeQuota”）.css（“宽度”））/100*（100-getRemainingQuotaInPercent（））+“px”）；
$（“#quotaOutputText”）.text（Math.round（getremaingquotainBytes（）/1000）+“本地存储中的可用KB”）；
$（“#quotaOutputPercentText”）.text（本地存储中可用配额的getRemainingQuotaInPercent（）+）；
}
$(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");
}