Каков максимальный размер значений localStorage?

С localStorage (в настоящее время) поддерживает только строки как значения, и для этого объекты должны быть stringified (сохранены как JSON-string), прежде чем они могут быть сохранены, существует определенное ограничение относительно длины значений.

кто-нибудь знает, есть ли определение, которое применяется ко всем браузерам?

10 ответов


слово статья Википедии о веб-хранилище:

веб-хранилище можно рассматривать упрощенно как улучшение cookies, обеспечивая гораздо большую емкость хранилища (10 МБ на источник в Google Chrome (https://plus.google.com/u/0/+FrancoisBeaufort/сообщения / S5Q9HqDB8bh), Mozilla Firefox и Opera; 10 МБ на область хранения в Internet Explorer) и лучшие программные интерфейсы.

, а также цитата из Джон подал в отставку статья [опубликовано январь 2007]:

Место Хранения

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

Если вы посмотрите на исходный код Mozilla мы видно, что 5120KB по умолчанию размер хранилища для всего домена. Это дает вам значительно больше пространства для работы с чем типичное 2KB печенье.

однако, размер этой области хранения может быть настроен пользователем (так 5MB площадь хранения не гарантируется, не подразумевается) и агента пользователя (Opera, например, может предоставлять только 3MB-но только время покажет.)


на самом деле Opera не имеет ограничения 5 Мб. Оно предлагает увеличить предел по мере того как применения требуют больше. Пользователь может даже выбрать "неограниченное хранилище" для домена.

вы можете легко тест localStorage пределы / квота себя.


вот простой скрипт для выяснения предела:

if (localStorage && !localStorage.getItem('size')) {
    var i = 0;
    try {
        // Test up to 10 MB
        for (i = 250; i <= 10000; i += 250) {
            localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));
        }
    } catch (e) {
        localStorage.removeItem('test');
        localStorage.setItem('size', i - 250);            
    }
}

здесь суть, JSFiddle и блоге.

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


Не предполагайте, что доступно 5 Мб-емкость localStorage зависит от браузера, при этом 2.5 Мб, 5 Мб и unlimited являются наиболее распространенными значениями. Источник: http://dev-test.nemikor.com/web-storage/support-test/


найти максимальную длину одной строки, которая может быть сохранена в localStorage

этот фрагмент найдет максимальную длину строки, которая может быть сохранена в localStorage для каждого домена.

//Clear localStorage
for (var item in localStorage) delete localStorage[item];

window.result = window.result || document.getElementById('result');

result.textContent = 'Test running…';

//Start test
//Defer running so DOM can be updated with "test running" message
setTimeout(function () {

    //Variables
    var low = 0,
        high = 2e9,
        half;

    //Two billion may be a little low as a starting point, so increase if necessary
    while (canStore(high)) high *= 2;


    //Keep refining until low and high are equal
    while (low !== high) {
        half = Math.floor((high - low) / 2 + low);

        //Check if we can't scale down any further
        if (low === half || high === half) {
            console.info(low, high, half);
            //Set low to the maximum possible amount that can be stored 
            low = canStore(high) ? high : low;
            high = low;
            break;
        }


        //Check if the maximum storage is no higher than half
        if (storageMaxBetween(low, half)) {
            high = half;
            //The only other possibility is that it's higher than half but not higher than "high"
        } else {
            low = half + 1;
        }

    }

    //Show the result we found!
    result.innerHTML = 'The maximum length of a string that can be stored in localStorage is <strong>' + low + '</strong> characters.';

    //Functions
    function canStore(strLen) {
        try {
            delete localStorage.foo;
            localStorage.foo = Array(strLen + 1).join('A');
            return true;
        } catch (ex) {
            return false;
        }
    }


    function storageMaxBetween(low, high) {
        return canStore(low) && !canStore(high);
    }

}, 0);
<h1>LocalStorage single value max length test</h1>

<div id='result'>Please enable JavaScript</div>

обратите внимание, что длина строки ограничена в JavaScript; если вы хотите просмотреть максимальный объем данных, которые могут быть сохранены в localStorage когда вы не ограничены одной строкой, вы можно использовать код в этой ответ.

Edit: фрагменты стека не поддерживают localStorage, Так что вот ссылка на JSFiddle.

результаты

Chrome (45.0.2454.101): 5242878 символов
Firefox (40.0.1): 5242883 символов
Internet Explorer (11.0.9600.18036): 16386 122066 122070 символов

Я получаю разные результаты при каждом запуске в Internet Explorer.


вы не хотите stringify больших объектов в одну запись localStorage. Это было бы очень неэффективно - все это нужно было бы анализировать и перекодировать каждый раз, когда некоторые незначительные изменения деталей. Кроме того, JSON не может обрабатывать несколько перекрестных ссылок в структуре объекта и стирает множество деталей, например конструктор, нечисловые свойства массивов, то, что находится в разреженной записи и т. д.

вместо этого, вы можете использовать http://rhaboo.org. Он хранит большие объекты, использующие множество записей localStorage, чтобы вы могли быстро вносить небольшие изменения. Восстановленные объекты являются гораздо более точными копиями сохраненных, а API невероятно прост. Например:

var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
  one: ['man', 'went'],
  2: 'mow',
  went: [  2, { mow: ['a', 'meadow' ] }, {}  ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');

кстати, я написал это.


мобильные браузеры:

Browser    | Chrome    | Android Browser    | Firefox     | iOS Safari
Version    | 40        | 4.3                | 34          | 6-8
Available  | 10MB      | 2MB                | 10MB        | 5MB

настольные браузеры:

Browser    | Chrome   | Opera    | Firefox    | Safari      | IE
Version    | 40       | 27       | 34         | 6-8         | 9-11
Available  | 10MB     | 10MB     | 10MB       | 5MB         | 10MB

мне очень нравится ответ cdmckay, но это не очень хорошо выглядеть, чтобы проверить размер в режиме реального времени: это просто слишком медленно (2 секунды для меня). Это улучшенная версия, которая намного быстрее и точнее, а также с возможностью выбрать, насколько большой может быть ошибка (по умолчанию 250,000, чем меньше ошибка - тем длиннее расчет):

function getLocalStorageMaxSize(error) {
  if (localStorage) {
    var max = 10 * 1024 * 1024,
        i = 64,
        string1024 = '',
        string = '',
        // generate a random key
        testKey = 'size-test-' + Math.random().toString(),
        minimalFound = 0,
        error = error || 25e4;

    // fill a string with 1024 symbols / bytes    
    while (i--) string1024 += 1e16;

    i = max / 1024;

    // fill a string with 'max' amount of symbols / bytes    
    while (i--) string += string1024;

    i = max;

    // binary search implementation
    while (i > 1) {
      try {
        localStorage.setItem(testKey, string.substr(0, i));
        localStorage.removeItem(testKey);

        if (minimalFound < i - error) {
          minimalFound = i;
          i = i * 1.5;
        }
        else break;
      } catch (e) {
        localStorage.removeItem(testKey);
        i = minimalFound + (i - minimalFound) / 2;
      }
    }

    return minimalFound;
  }
}

Для теста:

console.log(getLocalStorageMaxSize()); // takes .3s
console.log(getLocalStorageMaxSize(.1)); // takes 2s, but way more exact

это работает значительно быстрее для стандартной ошибки; Также это может быть много точнее, когда это необходимо.


вы можете использовать следующий код в современных браузерах для эффективной проверки квоты хранения (total & used) в режиме реального времени:

if ('storage' in navigator && 'estimate' in navigator.storage) {
        navigator.storage.estimate()
            .then(estimate => {
                console.log("Usage (in Bytes): ", estimate.usage,
                            ",  Total Quota (in Bytes): ", estimate.quota);
            });
}

Я делаю следующее:

getLocalStorageSizeLimit = function () {

    var maxLength = Math.pow(2,24);
    var preLength = 0;
    var hugeString = "0";
    var testString;
    var keyName = "testingLengthKey";

    //2^24 = 16777216 should be enough to all browsers
    testString = (new Array(Math.pow(2, 24))).join("X");

    while (maxLength !== preLength) {
        try  {
            localStorage.setItem(keyName, testString);

            preLength = testString.length;
            maxLength = Math.ceil(preLength + ((hugeString.length - preLength) / 2));

            testString = hugeString.substr(0, maxLength);
        } catch (e) {
            hugeString = testString;

            maxLength = Math.floor(testString.length - (testString.length - preLength) / 2);
            testString = hugeString.substr(0, maxLength);
        }
    }

    localStorage.removeItem(keyName);

    maxLength = JSON.stringify(this.storageObject).length + maxLength + keyName.length - 2;

    return maxLength;
};