我正在使用Bespin编辑器和HTML5的localStorage创建一个应用程序。它在本地存储所有文件并有助于语法，使用JSLint和其他一些CSS和HTML解析器来帮助用户。
我想计算已经使用了多少localStorage限制以及实际存在多少。 今天可能吗？我想不要简单地计算存储的位数。但话又说回来，我不确定还有什么我无法衡量自己。
答案 0 :(得分：67)
您可以通过使用JSON方法将整个localStorage对象转换为JSON字符串来获得一个近似的想法：
JSON.stringify(localStorage).length
我不知道它的字节精确度如何，特别是如果你正在使用额外的对象，只需要增加标记的几个字节 - 但我认为这比认为你只推28K而不是280K更好（反之亦然。）
答案 1 :(得分：47)
我没有找到一种通用方法来获取我需要的浏览器的剩余限制，但我确实发现当你达到限制时会弹出一条错误消息。这在每个浏览器中都是不同的。
为了最大化，我使用了这个小脚本：
for (var i = 0, data = "m"; i < 40; i++) {
try {
localStorage.setItem("DATA", data);
data = data + data;
} catch(e) {
var storageSize = Math.round(JSON.stringify(localStorage).length / 1024);
console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K");
console.log(e);
break;
}
}
localStorage.removeItem("DATA");
由此我得到了这个信息：
Google Chrome
Mozilla Firefox
<强> Safari浏览器
Internet Explorer，Edge （社区）
我的解决方案
到目前为止，我的解决方案是每次用户保存任何内容时添加额外的呼叫。如果异常被捕获，那么我会告诉他们他们的存储容量已经用完了。
修改：删除添加的数据
我忘了提到为了实际工作，你需要删除最初设置的DATA项。上面使用removeItem()函数反映了这一变化。
答案 2 :(得分：26)
IE8为此目的实现remainingSpace属性：
alert(window.localStorage.remainingSpace); // should return 5000000 when empty
不幸的是，这似乎在其他浏览器中不可用。但是我不确定他们是否实现了类似的东西。
答案 3 :(得分：12)
您可以使用以下行准确计算此值，并使用here is a jsfiddle来说明其使用情况
alert(1024 * 1024 * 5 - escape(encodeURIComponent(JSON.stringify(localStorage))).length);
答案 4 :(得分：8)
今天进入测试阶段（超过存储配额）并制定解决方案。国际海事组织，知道限制是什么以及我们所处的位置远远不如实施一种功能性的方式来继续存储超出配额。
因此，我们不是尝试进行大小比较和容量检查，而是在达到配额时做出反应，将当前存储减少三分之一，然后继续存储。如果减少失败，请停止存储。
set: function( param, val ) {
try{
localStorage.setItem( param, typeof value == 'object' ? JSON.stringify(value) : value )
localStorage.setItem( 'lastStore', new Date().getTime() )
}
catch(e){
if( e.code === 22 ){
// we've hit our local storage limit! lets remove 1/3rd of the entries (hopefully chronologically)
// and try again... If we fail to remove entries, lets silently give up
console.log('Local storage capacity reached.')
var maxLength = localStorage.length
, reduceBy = ~~(maxLength / 3);
for( var i = 0; i < reduceBy; i++ ){
if( localStorage.key(0) ){
localStorage.removeItem( localStorage.key(0) );
}
else break;
}
if( localStorage.length < maxLength ){
console.log('Cache data reduced to fit new entries. (' + maxLength + ' => ' + localStorage.length + ')');
public.set( param, value );
}
else {
console.log('Could not reduce cache size. Removing session cache setting from this instance.');
public.set = function(){}
}
}
}
}
此函数位于包装器对象中，因此public.set只调用自身。现在我们可以添加到存储中，而不用担心配额是什么或者我们距离它有多近。如果一个商店超过1/3，配额大小就是这个功能停止剔除和退出存储的地方，那时你不应该缓存，对吧？
答案 5 :(得分：5)
要添加到浏览器测试结果：
<强>火狐 I = 22。
<强> Safari浏览器 我的Mac上的5.0.4版本没有挂起。 Chrome出错。 I = 21。
<强>戏 告诉用户该网站想要存储数据但没有足够的空间。用户可以拒绝该请求，超出所需金额的限制或其他几个限制，或将其设置为无限制。转到opera：webstorage来说明是否出现此消息。 I = 20。抛出的错误与Chrome相同。
IE9标准模式 Chrome出错。 I = 22。
在IE8标准模式下IE9 控制台消息“错误：没有足够的存储空间来完成此操作”。 I = 22
较旧模式下的IE9 对象错误。 I = 22。
<强> IE8 没有要测试的副本，但支持本地存储（http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage）
IE7及以下 不支持本地存储。
答案 6 :(得分：2)
希望我能在评论中加上这一点 - 不够代表，抱歉。
我运行了一些性能测试 - 期望JSON.stringify（localStorage）。length在本地存储占用率很高的情况下是一个昂贵的操作。
http://jsperf.com/occupied-localstorage-json-stringify-length
确实如此 - 比跟踪你所存储的内容贵50倍，并且更糟糕的是本地存储更加充实。
答案 7 :(得分：2)
您可以使用此web storage support test
测试浏览器我在Android平板电脑和Windows笔记本电脑上测试Firefox，在Windows上测试Chromium 结果：
<强> Firefox （窗口）：
<强> Firefox （机器人）：
<强> Chromium （窗口）：
在Google Chrome版本52.0.2743.116 m（64位）上限制5101k个字符稍低一点。这意味着最大可用版本可能会发生变化。
答案 8 :(得分：1)
我为localStorage * here *
制作了一套有用的函数http://jsfiddle.net/kzq6jgqa/3/
function getLeftStorageSize() {
var itemBackup = localStorage.getItem("");
var increase = true;
var data = "1";
var totalData = "";
var trytotalData = "";
while (true) {
try {
trytotalData = totalData + data;
localStorage.setItem("", trytotalData);
totalData = trytotalData;
if (increase) data += data;
} catch (e) {
if (data.length < 2) break;
increase = false;
data = data.substr(data.length / 2);
}
}
localStorage.setItem("", itemBackup);
return totalData.length;
}
// Examples
document.write("calculating..");
var storageLeft = getLeftStorageSize();
console.log(storageLeft);
document.write(storageLeft + "");
// to get the maximum possible *clear* the storage
localStorage.clear();
var storageMax = getLeftStorageSize();
请注意，这不是很快，所以不要一直使用它。
有了这个，我还发现：Item-Name将占用与其长度一样多的空间，Item-Value也将占用与其长度一样多的空间。
我得到的最大存储量 - 大约是5M：
您会在小提琴中找到一些经过评论的代码，以便在控制台中查看进度。
花了我一些时间来做，希望这有助于☺
答案 9 :(得分：1)
我需要实际模拟和测试存储空间时我的模块会做什么，所以我需要在存储空间满时时获得接近的精度，而不是接受的答案，它以i的速率失去了精度^ 2
这是我的脚本，当达到内存上限时应该始终产生10的精度，尽管有一些简单的优化，但是相当快...编辑：我使脚本更好并具有精确的精度：
function fillStorage() {
var originalStr = "1010101010";
var unfold = function(str, times) {
for(var i = 0; i < times; i++)
str += str;
return str;
}
var fold = function(str, times) {
for(var i = 0; i < times; i++) {
var mid = str.length/2;
str = str.substr(0, mid);
}
return str;
}
var runningStr = originalStr;
localStorage.setItem("filler", runningStr);
while(true) {
try {
runningStr = unfold(runningStr, 1);
console.log("unfolded str: ", runningStr.length)
localStorage.setItem("filler", runningStr);
} catch (err) {
break;
}
}
runningStr = fold(runningStr, 1);
var linearFill = function (str1) {
localStorage.setItem("filler", localStorage.getItem("filler") + str1);
}
//keep linear filling until running string is no more...
while(true) {
try {
linearFill(runningStr)
} catch (err) {
runningStr = fold(runningStr, 1);
console.log("folded str: ", runningStr.length)
if(runningStr.length == 0)
break;
}
}
console.log("Final length: ", JSON.stringify(localStorage).length)
}
答案 10 :(得分：0)
这可能对某人有所帮助。在chrome中，可以要求用户在需要时允许使用更多磁盘空间：
// Request Quota (only for File System API)
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
访问https://developers.google.com/chrome/whitepapers/storage#asking_more了解详情。
答案 11 :(得分：0)
try {
var count = 100;
var message = "LocalStorageIsNOTFull";
for (var i = 0; i <= count; count + 250) {
message += message;
localStorage.setItem("stringData", message);
console.log(localStorage);
console.log(count);
}
}
catch (e) {
console.log("Local Storage is full, Please empty data");
// fires When localstorage gets full
// you can handle error here ot emply the local storage
}