Как найти размер localStorage

Question

В настоящее время я занимаюсь разработкой сайта, который будет использовать HTML5 localStorage.Я прочитал все об ограничениях размера для разных браузеров.Тем не менее, я не видел ничего о том, как узнать текущий размер экземпляра localStorage. Этот вопрос указывает на то, что в JavaScript нет встроенного способа отображения размера для данной переменной.Есть ли у localStorage свойство размера памяти, которое я не видел?Есть ли простой способ сделать это, чего мне не хватает?

Мой сайт предназначен для того, чтобы пользователи могли вводить информацию в режиме «офлайн», чтобы они могли предупреждать их, когда хранилище почтиполное очень важно.

Answer 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.

Answer 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"

Answer 3

IE имеет свойство ОстальноеSpace объекта Хранилище.В настоящее время в других браузерах нет эквивалента.

Я считаю, что объем по умолчанию равен 5 МБ, хотя я лично не проверял его.

Answer 4

Вот простой пример того, как это сделать, и он должен работать с каждым браузером

alert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);

Answer 5

Надеюсь, это поможет кому-то.

Поскольку Jas-пример на jsfiddle у меня не работает, я придумал это решение.(спасибо Сержу Селецкому и Шураву за их биты, которые я использовал в приведенном ниже коде)

Ниже приведена функция, которая может использоваться для проверки того, сколько места доступно для localStorage и (если какие-либо ключи уже есть в lS)сколько места осталось.

Это немного грубая сила, но она работает практически во всех браузерах ... кроме Firefox.Что ж, в настольных FF это занимает целую вечность (4-5 минут), а на Android это просто вылетает.

Под этой функцией находится краткое описание тестов, которые я провел в разных браузерах на разных платформах.Наслаждайтесь!

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
}

И, как было обещано выше, тест в разных браузерах:

GalaxyTab 10.1

• Maxthon Pad 1.7 ~ 1130ms 5Mb
• В Firefox 20.0 (бета-версия 20.0) произошел сбой обоих
• Chrome 25.0.1364.169 ~ 22250ms / 5Mb
• Собственный (идентифицируется как Safari 4.0 / Webkit534.30) ~ 995ms / 5Mb

iPhone 4s iOS 6.1.3

• Safari ~ 520 мс / 5 Мб
• As HomeApp ~ 525 мс / 5 Мб
• iCab ~ 710 мс / 5 МБ

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 (после жалобы на продолжительный запуск сценария)

iPad 3 iOS 6.1.3

• Safari ~ 430 мс / 5 МБ
• iCab ~ 595 мс / 5 МБ

Windows 7-64b (Core 2 Duo 2.93 6 Гб памяти)

• Safari 5.1.7 ~ 80 мс / 5 Мб
• 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, но Opera приятно спрашивает, хотим ли мы увеличить количество lS, к сожалению, вылетает при тестированиипроводится несколько раз подряд)

Win 8 (в рамках Parallels 8)

• IE10 ~ 7850ms /9.54Mb

Answer 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());

Наконец, размер в байтах будет зарегистрирован в браузере.

Answer 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)';
    };

Answer 8

В дополнение к ответу @ serge, который чаще всего голосуется здесь, необходимо учитывать размер ключей.Код ниже добавит размер ключей, хранящихся в localStorage

var t = 0; 
for (var x in localStorage) { 
    t += (x.length + localStorage[x].length) * 2; 
} 
console.log((t / 1024) + " KB");

Answer 9

Текущий размер данных локального хранилища можно получить с помощью функции Blob. Это может не работать в старых браузерах.

Пример:

return new Blob(Object.values(localStorage)).size;

Object.values ​​() превращает объект localStorage в массив. Blob превращает массив в необработанные данные.

Answer 10

Способ решения этой проблемы заключается в создании функций для определения используемого и оставшегося пространства в локальном хранилище, а затем функции, которая вызывает эти функции для определения максимального объема хранилища.

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;
}