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

Не предполагайте, что доступно 5 МБ - емкость localStorage варьируется в зависимости от браузера. Наиболее распространенные значения - это 2,5 МБ, 5 МБ и неограниченное хранилище. Для получения дополнительной информации вы можете ознакомиться с источником: http://dev-test.nemikor.com/web-storage/support-test/

Вы можете использовать следующую функцию для определения общего размера доступного пространства в localStorage:

function getStorageTotalSize(upperLimit/*в байтах*/) {
    var store = localStorage, testkey = "$_test"; // (ПРИМЕЧАНИЕ: Тестовый ключ является частью хранения!!! Должен содержать четное количество символов)
    var test = function (_size) {
        try {
            store.removeItem(testkey); 
            store.setItem(testkey, new Array(_size + 1).join('0')); 
        } catch (_ex) { 
            return false; 
        } 
        return true; 
    }
    
    var backup = {};
    for (var i = 0, n = store.length; i < n; ++i) 
        backup[store.key(i)] = store.getItem(store.key(i));
    
    store.clear(); // (вы можете сделать итерацию по элементам, сначала создав резервную копию, а затем восстановить позже)
    
    var low = 0, high = 1, _upperLimit = (upperLimit || 1024 * 1024 * 1024) / 2, upperTest = true;
    
    while ((upperTest = test(high)) && high < _upperLimit) {
        low = high; 
        high *= 2; 
    }
    
    if (!upperTest) {
        var half = ~~((high - low + 1) / 2); // (~~ - более быстрый Math.floor())
        high -= half;
        while (half > 0) 
            high += (half = ~~(half / 2)) * (test(high) ? 1 : -1);
        
        high = testkey.length + high;
    }
    
    if (high > _upperLimit) 
        high = _upperLimit;
    
    store.removeItem(testkey);
    for (var p in backup) 
        store.setItem(p, backup[p]);
    
    return high * 2; // (*2 из-за хранения в кодировке Unicode)
}

Как это работает: функция увеличивает размер до тех пор, пока не достигнет предела или тест не завершится неудачей. Затем она сохраняет половину расстояния между low и high и вычитает/добавляет половину от половины каждый раз (вычитает при сбое и добавляет при успехе), подбирая правильное значение.

upperLimit по умолчанию составляет 1 ГБ и ограничивает, насколько высоко вы можете увеличивать размер экспоненциально перед началом бинарного поиска. Сомневаюсь, что это потребуется менять, но всегда стоит думать наперед. 😉

На Chrome вы можете протестировать это следующим образом:

> getStorageTotalSize();
> 10485762
> 10485762/2
> 5242881
> localStorage.setItem("a", new Array(5242880).join("0")) // успешно
> localStorage.setItem("a", new Array(5242881).join("0")) // неудачно ('a' занимает одно место [2 байта])

Также IE11, Edge и Firefox показывают тот же максимальный размер (10485762 байта).

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

if ('storage' in navigator && 'estimate' in navigator.storage) {
    navigator.storage.estimate()
        .then(estimate => {
            console.log("Использование (в байтах): ", estimate.usage,
                        ", Общая квота (в байтах): ", estimate.quota);
        });
}

Этот код проверяет, поддерживают ли браузеры API для оценки хранилища, и если да, то получает информацию о текущем использовании и общей квоте хранилища. Это может быть полезно для контроля за размером данных, хранящихся в браузере, таких как LocalStorage или IndexedDB.

Ваш код предназначен для определения ограничения размера Local Storage в браузере. Давайте разберем его шаг за шагом.

1. Инициализация переменных: Вы задаете начальные параметры maxLength (максимальная длина) равным 2 в степени 24, preLength (предыдущая длина) равным 0 и keyName как "testingLengthKey" для тестирования.

2. Создание тестовой строки: Строка testString инициализируется длинной строкой, состоящей из символов "X", размером в 2^24 символа, что должно покрывать пределы большинства браузеров.

3. Цикл для определения максимальной длины: Вы используете цикл while для попытки записать testString в Local Storage и отследить, возможно ли это. Если запись проходит успешно, вы обновляете preLength и пересчитываете maxLength.

4. Обработка ошибок: Если при записи возникает ошибка (например, превышен лимит), вы обновляете hugeString и пересчитываете maxLength, снижая размер testString.

5. Удаление временного ключа: После завершения проверки вы удаляете временный элемент keyName из Local Storage, чтобы не оставлять следов после теста.

6. Возврат результата: Наконец, вы возвращаете фактический размер Local Storage, добавляя длину JSON-представления localStorage и длину ключа.

В результате этот код позволяет получить максимально возможный размер Local Storage в браузере. Обратите внимание, что результаты могут варьироваться в зависимости от браузера и его настроек.

Если у вас возникли вопросы о каком-либо из шагов или о том, как улучшить код, дайте знать!

Когда я разрабатывал расширение для браузера Chrome (для настольных систем), я тестировал максимальный размер Local Storage по этой причине.

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

Ubuntu 18.04.1 LTS (64-разрядная)
Chrome 71.0.3578.98 (официальная сборка) (64-разрядная)
Размер содержимого Local Storage: 10240 KB (10 MB)

Если я пытался использовать больше 10240 KB, я получал следующую ошибку:

Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'notes' exceeded the quota.

Обновление от 23 октября 2020 года

Для расширений Chrome доступен API chrome.storage. Если вы укажете разрешение "storage" в файле manifest.json:

{
    "name": "My extension",
    ...
    "permissions": ["storage"],
    ...
}

Вы можете получить доступ к нему следующим образом:

chrome.storage.local.QUOTA_BYTES // 5242880 (в байтах)

Таким образом, помимо Local Storage вы можете использовать chrome.storage, который имеет другую квоту на размер данных и может быть более подходящим для вашего расширения.