Какие есть ограничения по объему у хранилищ?

Ограничения объема веб-хранилищ: localStorage, sessionStorage, IndexedDB и Cookies

В современной фронтенд-разработке мы используем несколько механизмов хранения данных на стороне клиента, каждый из которых имеет свои специфические ограничения по объему.

1. localStorage и sessionStorage

Эти синхронные API-хранилища имеют одинаковые ограничения:

• Базовый лимит: 5 МБ на домен (в большинстве современных браузеров)
• Вариации: В зависимости от браузера лимит может составлять от 2.5 МБ до 10 МБ
• Ключевое отличие: localStorage сохраняет данные бессрочно, а sessionStorage — только на время сессии (до закрытия вкладки)

// Пример проверки доступного пространства
function getRemainingStorageSpace() {
  const testKey = 'test';
  let total = '';
  
  try {
    // Заполняем хранилище тестовыми данными
    while (true) {
      total += 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
      localStorage.setItem(testKey, total);
    }
  } catch (e) {
    // При превышении лимита ловим исключение
    const used = unescape(encodeURIComponent(localStorage.getItem(testKey))).length;
    localStorage.removeItem(testKey);
    return {
      used: used,
      remaining: 5 * 1024 * 1024 - used // 5 МБ в байтах
    };
  }
}

2. IndexedDB

IndexedDB — это асинхронная NoSQL-база данных в браузере с значительно большими лимитами:

• Динамические квоты: Обычно составляет от 50% до 80% свободного места на диске
• Групповые лимиты: Веб-сайты из одного origin (домен+порт+протокол) делят общую квоту
• Права доступа: Пользователь должен явно предоставить разрешение на увеличение объема сверх базового лимита (обычно несколько сотен МБ)

// Запрос увеличения квоты в IndexedDB
async function requestStorageQuota() {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    const estimation = await navigator.storage.estimate();
    console.log(`Использовано: ${estimation.usage} байт`);
    console.log(`Доступно: ${estimation.quota} байт`);
    
    // Запрос дополнительного места (требует жестов пользователя)
    if ('persist' in navigator.storage) {
      const isPersisted = await navigator.storage.persist();
      console.log(`Хранилище постоянно: ${isPersisted}`);
    }
  }
}

3. Cookies

Cookies имеют наиболее строгие ограничения:

• Размер на куку: 4096 байт (4 КБ) включая имя, значение и атрибуты
• Количество на домен: Обычно 50-150 cookies в зависимости от браузера
• Общий лимит: Около 300-500 cookies суммарно для всех доменов
• Передача на сервер: Все cookies автоматически отправляются с каждым HTTP-запросом, что влияет на производительность

// Пример работы с cookies (ограниченный объем)
document.cookie = "user_preferences=theme:dark,language:ru; max-age=2592000; path=/";
// Общий размер этой куки должен быть меньше 4096 байт

4. Cache API (Service Workers)

Cache API используется для хранения сетевых запросов и ответов:

• Лимиты: Управляются браузером динамически, обычно делят квоту с IndexedDB
• Автоочистка: Браузер может удалять данные при нехватке места
• Стратегии: Рекомендуется реализовывать стратегии очистки (LRU - Least Recently Used)

Факторы, влияющие на фактический объем

Важно понимать, что лимиты не абсолютны и зависят от:

• Типа браузера: Chrome, Firefox, Safari имеют разные политики
• Режима инкогнито: В приватном режиме лимиты часто сокращаются
• Свободного места на диске: Браузеры динамически адаптируются
• Политик предприятия: Корпоративные настройки могут накладывать дополнительные ограничения

Рекомендации по управлению хранилищем

Для эффективной работы с клиентским хранилищем:

• Всегда обрабатывайте исключения QuotaExceededError
• Используйте сжатие данных для текстового контента
• Реализуйте стратегии очистки устаревших данных
• Информируйте пользователей о необходимости освободить место
• Отдавайте предпочтение IndexedDB для больших объемов данных
• Тестируйте в разных браузерах, так как реализация может отличаться

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

// Безопасная работа с хранилищем
function safeLocalStorageSet(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (error) {
    if (error.name === 'QuotaExceededError') {
      console.warn('Хранилище переполнено. Очистите старые данные.');
      // Реализуйте логику очистки устаревших данных
      return false;
    }
    throw error;
  }
}

Выбор подходящего типа хранилища зависит от конкретной задачи: cookies для небольших данных, передаваемых на сервер; localStorage для простых настроек; IndexedDB для сложных структур данных и офлайн-работы приложения.