Как найти размер localStorage
В настоящее время я разрабатываю сайт, который будет использовать локальную хранилище HTML5. Я читал все о ограничениях размера для разных браузеров. Тем не менее, я не видел ничего о том, как узнать текущий размер экземпляра localStorage. Этот вопрос указывает, что JavaScript не имеет встроенного способа отображения размера для данной переменной. У localStorage есть свойство памяти, которое я не видел? Есть ли простой способ сделать это, что мне не хватает?
Мой сайт предназначен для того, чтобы пользователи могли вводить информацию в режиме "офлайн", поэтому очень важно иметь предупреждение, когда хранилище почти заполнено.
Ответы
Ответ 1
Выполните этот фрагмент в консоли 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");
или добавьте этот текст в поле "местоположение" закладки для удобного использования
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"));
P.S. Фрагменты обновляются в соответствии с запросом в комментарии. Теперь в расчет включена длина самого ключа.
Каждая длина умножается на 2, потому что символ в javascript хранится как UTF-16 (занимает 2 байта)
P.P.S. Должно работать как в Chrome, так и в Firefox.
Ответ 2
Отказавшись от того, что сказал @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"
Ответ 3
IE имеет свойство elseSpace объекта Storage. В настоящее время другие браузеры не имеют равных возможностей.
Я считаю, что объем пространства по умолчанию составляет 5 МБ, хотя я лично его не тестировал.
Ответ 4
Вот простой пример о том, как это сделать, и должен работать с каждым браузером
alert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);
Ответ 5
Надеюсь, что это поможет кому-то.
Поскольку Jas-example на jsfiddle не работает для меня, я придумал это решение.
(спасибо Serge Seletskyy и Shourav за их биты, которые я использовал в приведенном ниже коде)
Ниже приведена функция, которая может использоваться для проверки того, сколько места доступно для localStorage и (если какие-либо ключи уже находятся в lS), сколько места осталось.
Это немного грубая сила, но она работает почти в каждом браузере... кроме Firefox.
Ну, на настольном ПК FF требуется полгода (4-5 минут), и на Android он просто падает.
Под этой функцией представлено краткое резюме тестов, которые я сделал в разных браузерах на разных платформах. Наслаждайтесь!
function testLocalStorage() {
var timeStart = Date.now();
var timeEnd, countKey, countValue, amountLeft, itemLength;
var occupied = leftCount = 3; //Shurav 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
}
И как обещали выше некоторые тесты в разных браузерах:
GalaxyTab 10.1
- Maxthon Pad 1.7 ~ 1130ms 5Mb
- Firefox 20.0 (бета-версия 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 8 ГБ памяти)
- Safari 6.0.3 ~ 105ms/5Mb
- Chrome 26.0.1410.43 ~ 3400ms/5Mb
- Firefox 20.0 300150ms (!)/10Mb (после жалоб на script работает дольше)
iPad 3 iOS 6.1.3
- Safari ~ 430ms/5Mb
- iCab ~ 595ms/5mb
Windows 7 -64b (Core 2 Duo 2.93 6 ГБ памяти)
- Safari 5.1.7 ~ 80ms/5Mb
- Chrome 26.0.1410.43 ~ 1220ms/5Mb
- Firefox 20.0 228500ms (!)/10Mb (после жалоб на script работает дольше)
- IE9 ~ 17900ms/9.54Mb (если какие-либо файлы console.log в коде не работают до тех пор, пока не будут открыты DevTools)
- Opera 12.15 ~ 4212ms/3.55Mb (это когда выбрано 5Mb, но Opera спросит, если мы хотим увеличить количество lS, к сожалению, он падает, если тест проводится несколько раз подряд).
Win 8 (под Parallels 8)
Ответ 6
Вы можете рассчитать свой локальный ресурс следующими способами:
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());
Наконец, размер в байтах будет зарегистрирован в браузере.
Ответ 7
Я бы использовал код @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)';
};
Ответ 8
В дополнение к ответу @serge, который больше всего проголосовали, размер ключей необходимо учитывать. Код ниже добавит размер ключей, хранящихся в localStorage
var t = 0;
for (var x in localStorage) {
t += (x.length + localStorage[x].length) * 2;
}
console.log((t / 1024) + " KB");
Ответ 9
То, как я столкнулся с этой проблемой, - это создать функции для определения используемого пространства и оставшегося пространства в локальном хранилище, а затем функцию, которая вызывает эти функции для определения максимального пространства для хранения.
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;
}
Ответ 10
Вы можете получить текущий размер данных локального хранилища, используя функцию Blob. Это может не работать в старых браузерах.
Пример:
return new Blob(Object.values(localStorage)).size;
Object.values() превращает объект localStorage в массив. Blob превращает массив в необработанные данные.
Ответ 11
По мере того как спецификация идет, каждый символ строки составляет 16 бит.
Но проверка с помощью хром (Настройки > Настройки содержимого > Файлы cookie и данные сайта) показывает нам, что инициирование localStorage занимает 3 КБ (размер служебной информации)
И сохраненный размер данных следует этому соотношению (с точностью до 1 КБ)
3 + ((localStorage.x.length * 16)/(8 * 1024)) kB
где localStorage.x - ваша строка хранения.
Ответ 12
//Память занимает как ключ, так и значение, поэтому обновленный код.
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 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 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]);
Ответ 13
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
}
Ответ 14
Да, этот вопрос был задан как 10 лет назад. Но для тех, кто заинтересован (как я, поскольку я создаю автономный текстовый редактор, который сохраняет данные в локальном хранилище) и не умеет программировать, вы можете использовать что-то простое, например:
var warning = 1;
var limit = 2000000; //2 million characters, not really taking in account to bytes but for tested ammounts of characters stored
setInterval(function() {
localStorage["text"] = document.getElementById("editor").innerHTML; //gets text and saves it in local storage under "text"
if(localStorage["text"].length > limit && warning == 1){
alert("Local Storage capacity has been filled");
warning = 2; //prevent a stream of alerts
}
}, 1000);
//setInterval function saves and checks local storage
Лучший способ получить заполненный объем памяти - это просмотреть настройки сайта (например, если вы сохранили изображение в локальном хранилище). По крайней мере, в Chrome вы можете увидеть количество используемых байтов (то есть: 1222 байта). Однако лучшие способы увидеть заполненное локальное хранилище с помощью js уже упоминалось выше, поэтому используйте их.
Ответ 15
window.localStorage.remainingSpace