如何findlocalStorage的大小
我目前正在开发一个网站,将使用HTML5的localStorage。 我已经阅读了所有关于不同浏览器的大小限制。 不过,我还没有看到如何找出localStorage实例的当前大小。 这个问题似乎表明,JavaScript没有内置的方式来显示给定variables的大小。 localStorage是否具有我没有看到的内存大小属性? 有没有一个简单的方法来做到这一点,我失踪了?
我的网站旨在允许用户以“离线”模式input信息,因此当存储空间几乎已满时,能够给予警告非常重要。
在Chrome控制台中执行此片段
var _lsTotal=0,_xLen,_x;for(_x in localStorage){_xLen= ((localStorage[_x].length + _x.length)* 2);_lsTotal+=_xLen; console.log(_x.substr(0,50)+" = "+ (_xLen/1024).toFixed(2)+" KB")};console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");
或者在书签的“位置”字段中添加此文本以便于使用
javascript: var x, xLen, log=[],total=0;for (x in localStorage){xLen = ((localStorage[x].length * 2 + x.length * 2)/1024); log.push(x.substr(0,30) + " = " + xLen.toFixed(2) + " KB"); total+= xLen}; if (total > 1024){log.unshift("Total = " + (total/1024).toFixed(2)+ " MB");}else{log.unshift("Total = " + total.toFixed(2)+ " KB");}; alert(log.join("\n"));
PS片段根据评论中的请求进行更新。 现在计算包括密钥本身的长度。 每个长度都乘以2,因为javascript中的char存储为UTF-16(占用2个字节)
从上面的@Shourav说,我写了一个小函数,应该准确地抓住所有localStorage
键(对于当前域),并计算组合的大小,以便确切知道localStorage
对象占用了多less内存:
var localStorageSpace = function(){ var allStrings = ''; for(var key in window.localStorage){ if(window.localStorage.hasOwnProperty(key)){ allStrings += window.localStorage[key]; } } return allStrings ? 3 + ((allStrings.length*16)/(8*1024)) + ' KB' : 'Empty (0 KB)'; };
矿还: "30.896484375 KB"
IE有Storage对象的剩余空间属性。 其他浏览器在这个时候没有平等的。
我相信默认的空间量是5MB,虽然我没有亲自testing过。
这里是一个简单的例子 ,如何做到这一点,应该与每个浏览器
alert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);
希望这可以帮助别人。
因为jsfiddle上的Jas例子不适合我,所以我想出了这个解决scheme。 (感谢Serge Seletskyy和Shourav在下面的代码中所使用的位)
下面是可用于testinglocalStorage有多less可用空间的function(如果有任何密钥已经在lS中),剩下多less空间。
这是一个有点蛮力,但它几乎在每个浏览器…除了Firefox。 那么在桌面FF需要年龄(4-5分钟)才能完成,在Android上它只是崩溃。
该函数下面是我在不同平台上的不同浏览器中完成的testing的简短摘要。 请享用!
function testLocalStorage() { var timeStart = Date.now(); var timeEnd, countKey, countValue, amountLeft, itemLength; var occupied = leftCount = 3; //Shurav's comment on initial overhead //create localStorage entries until localStorage is totally filled and browser issues a warning. var i = 0; while (!error) { try { //length of the 'value' was picked to be a compromise between speed and accuracy, // the longer the 'value' the quicker script and result less accurate. This one is around 2Kb localStorage.setItem('testKey' + i, '11111111112222222222333333333344444444445555555555666661111111111222222222233333333334444444444555555555566666'); } catch (e) { var error = e; } i++; } //if the warning was issued - localStorage is full. if (error) { //iterate through all keys and values to count their length for (var i = 0; i < localStorage.length; i++) { countKey = localStorage.key(i); countValue = localStorage.getItem(localStorage.key(i)); itemLength = countKey.length + countValue.length; //if the key is one of our 'test' keys count it separately if (countKey.indexOf("testKey") !== -1) { leftCount = leftCount + itemLength; } //count all keys and their values occupied = occupied + itemLength; } ; //all keys + values lenght recalculated to Mb occupied = (((occupied * 16) / (8 * 1024)) / 1024).toFixed(2); //if there are any other keys then our 'testKeys' it will show how much localStorage is left amountLeft = occupied - (((leftCount * 16) / (8 * 1024)) / 1024).toFixed(2); //iterate through all localStorage keys and remove 'testKeys' Object.keys(localStorage).forEach(function(key) { if (key.indexOf("testKey") !== -1) { localStorage.removeItem(key); } }); } //calculate execution time var timeEnd = Date.now(); var time = timeEnd - timeStart; //create message var message = 'Finished in: ' + time + 'ms \n total localStorage: ' + occupied + 'Mb \n localStorage left: ' + amountLeft + "Mb"; //put the message on the screen document.getElementById('scene').innerText = message; //this works with Chrome,Safari, Opera, IE //document.getElementById('scene').textContent = message; //Required for Firefox to show messages }
正如上面在不同浏览器上的一些testing所承诺的那样:
GalaxyTab 10.1
- Maxthon Pad 1.7〜1130ms 5Mb
- Firefox 20.0(Beta 20.0)同时崩溃
- Chrome 25.0.1364.169〜22250ms / 5Mb
- Native(标识为Safari 4.0 / Webkit534.30)〜995ms / 5Mb
iPhone 4s iOS 6.1.3
- Safari〜520ms / 5Mb
- 作为HomeApp〜525ms / 5Mb
- iCab〜710ms / 5mb
MacBook Pro OSX 1.8.3(Core 2 Duo 2.66 8Gb内存)
- Safari 6.0.3〜105ms / 5Mb
- Chrome 26.0.1410.43〜3400ms / 5Mb
- Firefox 20.0 300150ms(!)/ 10Mb(抱怨脚本运行很久)
iPad 3 iOS 6.1.3
- Safari〜430ms / 5Mb
- iCab〜595ms / 5mb
Windows 7 -64b(Core 2 Duo 2.93 6Gb内存)
- Safari 5.1.7〜80ms / 5Mb
- Chrome 26.0.1410.43〜1220ms / 5Mb
- Firefox 20.0 228500ms(!)/ 10Mb(抱怨脚本运行很久)
- IE9〜17900ms /9.54Mb(如果代码中的任何console.logs在打开DevTools之前不工作)
- Opera 12.15〜4212ms /3.55Mb(这是5Mb的select,但Opera要求增加lS的数量,不幸的是如果连续testing几次就崩溃了)
Win 8(Parallels 8下)
- IE10〜7850ms / 9.54Mb
您可以通过以下方法计算您的本地存储:
function sizeofAllStorage(){ // provide the size in bytes of the data currently stored var size = 0; for (i=0; i<=localStorage.length-1; i++) { key = localStorage.key(i); size += lengthInUtf8Bytes(localStorage.getItem(key)); } return size; } function lengthInUtf8Bytes(str) { // Matches only the 10.. bytes that are non-initial characters in a multi-byte sequence. var m = encodeURIComponent(str).match(/%[89ABab]/g); return str.length + (m ? m.length : 0); } console.log(sizeofAllStorage());
最后以字节为单位的大小将被logging在浏览器中
我会使用@tennisgen的代码来获取所有内容,并计算内容,但我自己计算密钥:
var localStorageSpace = function(){ var allStrings = ''; for(var key in window.localStorage){ allStrings += key; if(window.localStorage.hasOwnProperty(key)){ allStrings += window.localStorage[key]; } } return allStrings ? 3 + ((allStrings.length*16)/(8*1024)) + ' KB' : 'Empty (0 KB)'; };
除了@ serge的答案,这里的表决次数最多,密钥的大小需要考虑。 下面的代码将添加存储在localStorage
中的密钥的大小
var t = 0; for (var x in localStorage) { t += (x.length + localStorage[x].length) * 2; } console.log((t / 1024) + " KB");
按照规范,string的每个字符都是16位。
但使用铬检查(设置>内容设置>cookies和网站数据)告诉我们,启动localStorage需要3kB(开销大小)
而存储的数据大小遵循这个关系(精确到1kB)
3 +((localStorage.x.length * 16)/(8 * 1024)) kB
其中localStorage.x是您的存储string。
我遇到这个问题的方法是创build函数来查找本地存储中已用空间和剩余空间,然后调用这些函数来确定最大存储空间。
function getUsedSpaceOfLocalStorageInBytes() { // Returns the total number of used space (in Bytes) of the Local Storage var b = 0; for (var key in window.localStorage) { if (window.localStorage.hasOwnProperty(key)) { b += key.length + localStorage.getItem(key).length; } } return b; } function getUnusedSpaceOfLocalStorageInBytes() { var maxByteSize = 10485760; // 10MB var minByteSize = 0; var tryByteSize = 0; var testQuotaKey = 'testQuota'; var timeout = 20000; var startTime = new Date().getTime(); var unusedSpace = 0; do { runtime = new Date().getTime() - startTime; try { tryByteSize = Math.floor((maxByteSize + minByteSize) / 2); localStorage.setItem(testQuotaKey, new Array(tryByteSize).join('1')); minByteSize = tryByteSize; } catch (e) { maxByteSize = tryByteSize - 1; } } while ((maxByteSize - minByteSize > 1) && runtime < timeout); localStorage.removeItem(testQuotaKey); if (runtime >= timeout) { console.log("Unused space calculation may be off due to timeout."); } // Compensate for the byte size of the key that was used, then subtract 1 byte because the last value of the tryByteSize threw the exception unusedSpace = tryByteSize + testQuotaKey.length - 1; return unusedSpace; } function getLocalStorageQuotaInBytes() { // Returns the total Bytes of Local Storage Space that the browser supports var unused = getUnusedSpaceOfLocalStorageInBytes(); var used = getUsedSpaceOfLocalStorageInBytes(); var quota = unused + used; return quota; }
window.localStorage.remainingSpace
//内存占用由键和值所以更新代码。
var jsonarr=[]; var jobj=null; for(x in sessionStorage) // Iterate through each session key { jobj={}; jobj[x]=sessionStorage.getItem(x); //because key will also occupy some memory jsonarr.push(jobj); jobj=null; } //https://developer.mozilla.org/en/docs/Web/JavaScript/Data_structures //JavaScript's String type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. var size=JSON.stringify(jsonarr).length*2; //16-bit that's why multiply by 2 var arr=["bytes","KB","MB","GB","TB"]; // Define Units var sizeUnit=0; while(size>1024){ // To get result in Proper Unit sizeUnit++; size/=1024; } alert(size.toFixed(2)+" "+arr[sizeUnit]);
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 or empty the local storage }