Какой объем данных можно хранить в LocalStorage?

Объем данных в LocalStorage

В современных браузерах объем данных, который можно хранить в LocalStorage (Web Storage API), обычно составляет 5–10 МБ на домен. Это не фиксированный стандарт, а практическая реализация, которую браузеры приняли для баланса между полезностью API и предотвращением злоупотреблений.

Технические детали и ограничения

LocalStorage является частью Web Storage API и предоставляет простое ключ-значение хранилище, сохраняющее данные между сессиями. Ключевые характеристики:

• Объем: Большинство браузеров (Chrome, Firefox, Safari, Edge) выделяют 5 МБ на домен (протокол, хост и порт). Некоторые, например Opera, могут предлагать до 10 МБ.
• Строковый формат: Все данные хранятся в виде строк. Для хранения объектов необходимо использовать JSON.stringify() при записи и JSON.parse() при чтении, что влияет на фактический занимаемый объем.
• Квота на домен: Лимит применяется ко всему хранилищу для конкретного источника (origin), а не к отдельному ключу.
• Синхронный API: Все операции синхронны, что может блокировать главный поток при работе с большими объемами данных.

Как проверить и измерить доступный объем

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

function testLocalStorageLimit() {
    const testKey = 'test';
    const testValue = 'a'.repeat(1024 * 1024); // Строка ~1 МБ
    let total = 0;

    try {
        while (true) {
            localStorage.setItem(testKey + total, testValue);
            total += 1;
            console.log(`Записано ~${total} МБ`);
        }
    } catch (e) {
        if (e.code === e.QUOTA_EXCEEDED_ERR || e.name === 'QuotaExceededError') {
            console.log(`Достигнут лимит. Примерная емкость: ${total} МБ`);
            // Очистка тестовых данных
            for (let i = 0; i < total; i++) {
                localStorage.removeItem(testKey + i);
            }
        } else {
            console.error('Другая ошибка:', e);
        }
    }
}

// Внимание: выполнение этой функции заполнит все доступное пространство!
// testLocalStorageLimit();

Важные практические соображения для QA

1. Тестирование граничных условий: Обязательно включайте в тест-кейсы сценарии:

    *   Попытка записи данных, превышающих лимит (ожидается `QuotaExceededError`).
    *   Постепенное заполнение хранилища и проверка корректности работы приложения при его заполнении на 80-90%.
    *   Проверка, что приложение корректно обрабатывает ситуацию переполнения (не "ломается" молча).

1. Сравнение с альтернативами: LocalStorage — не единственный клиентский вариант. Как QA-.инженер, вы должны понимать контекст выбора:

    *   **SessionStorage:** Аналогичный API, но данные очищаются после закрытия вкладки (объем 5-10 МБ).
    *   **IndexedDB:** Асинхронная база данных для сложных структур и больших объемов (обычно от 50% от свободного места на диске, но браузеры могут запрашивать разрешение пользователя при росте).
    *   **Cookies:** Сильно ограничены (~4 КБ на файл) и отправляются с каждым HTTP-запросом.

1. Влияние на производительность: Поскольку LocalStorage синхронный, операции с большими данными (например, сохранение большого объекта JSON) могут приводить к заметным "подвисаниям" интерфейса. Это нужно проверять в тестах производительности.

2. Очистка данных: Убедитесь, что в приложении есть механизм очистки устаревших или неиспользуемых данных из LocalStorage (например, по кнопке "Очистить кэш") и что он работает корректно.

Пример тест-кейса (структура)

Заголовок: Проверка обработки ошибки переполнения LocalStorage. Предусловия: LocalStorage приложения частично заполнено. Шаги:

1. Войти в приложение.
2. Выполнить действие, которое инициирует сохранение крупного набора данных (например, экспорт большого отчета "в офлайн").
3. Наблюдать за поведением. Ожидаемый результат: Приложение отображает понятное пользователю сообщение о невозможности сохранения из-за нехватки места и предлагает действия (очистить кэш, отменить). В консоли браузера фиксируется QuotaExceededError. Критические функции приложения остаются работоспособными.

Вывод

Лимит в 5-10 МБ делает LocalStorage подходящим для хранения предпочтений пользователя, токенов аутентификации, конфигураций или небольших кэшированных данных. Однако для хранения объемной информации (например, результатов сложных отчетов, медиа-контента) следует рекомендовать использование IndexedDB. Задача QA — не только проверять работу в рамках лимита, но и валидировать, что выбор технологии хранения данных адекватен требованиям продукта, а ошибки обрабатываются корректно.