我目前正在开发一个将使用 HTML5 的 localStorage 的站点。我已经阅读了有关不同浏览器的大小限制的所有信息。但是，我还没有看到有关如何找出 localStorage 实例的当前大小的任何信息。这个问题似乎表明 JavaScript 没有内置的方式来显示给定变量的大小。localStorage 是否有我没见过的内存大小属性？有没有一种简单的方法可以做到这一点，我错过了？
我的站点旨在允许用户以“离线”模式输入信息，因此能够在存储空间快满时向他们发出警告非常重要。
如何找到localStorage的大小
IT技术
javascript
html
local-storage
2021-02-05 04:23:48
6个回答
在 JavaScript 控制台中执行此代码段（一行版本）：
var _lsTotal=0,_xLen,_x;for(_x in localStorage){ if(!localStorage.hasOwnProperty(_x)){continue;} _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");
多行相同的代码以供阅读
var _lsTotal = 0,
_xLen, _x;
for (_x in localStorage) {
if (!localStorage.hasOwnProperty(_x)) {
continue;
}
_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){if(!localStorage.hasOwnProperty(x)){continue;} 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个字节）
PPS 应该适用于 Chrome 和 Firefox。
根据@Shourav 上面所说的，我编写了一个小函数，它应该准确地获取所有localStorage键（对于当前域）并计算组合大小，以便您确切知道localStorage对象占用了多少内存：
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"
您可以使用Blob 函数获取本地存储数据的当前大小。这可能不会在旧的浏览器工作，检查的支持new Blob，并Object.values()在caniuse。
例子：
return new Blob(Object.values(localStorage)).size;
Object.values() 将 localStorage 对象转换为数组。Blob 将数组转换为原始数据。
IE 具有Storage 对象的剩余空间属性。其他浏览器此时没有等效项。
我相信默认的空间量是 5MB，虽然我没有亲自测试过。
这是如何执行此操作的简单示例，并且应该适用于每个浏览器
alert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);