В каком хранилище браузера больше объем данных

Хранилища браузера и объемы данных

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

Сравнение по объемам

IndexedDB — самое объемное хранилище с наибольшей емкостью:

• Объем: от 50 MB до нескольких GB в зависимости от браузера
• Chrome/Edge: обычно 50% от свободного места на диске (может быть несколько GB)
• Firefox: по умолчанию 50 MB, но может быть расширено до 10% от свободного места
• Safari: обычно 1-2 GB

LocalStorage:

• Объем: 5-10 MB на домен (в большинстве браузеров)
• Одно из наиболее ограниченных хранилищ
• Синхронное, может замедлить приложение

SessionStorage:

• Объем: аналогично LocalStorage, 5-10 MB
• Доступно только в текущей сессии браузера
• Удаляется при закрытии вкладки

Cookies:

• Объем: очень мал, ~4 KB на кук
• Отправляется с каждым запросом на сервер
• Негативно влияет на производительность

Cache API (Service Workers):

• Объем: зависит от браузера, обычно 50-500 MB
• Используется для кэширования ассетов и API ответов
• Доступно в контексте Service Workers

Практические примеры использования

IndexedDB для больших объемов данных:

const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open("myAppDB", 1);
    
    request.onerror = () => reject(request.error);
    request.onsuccess = () => resolve(request.result);
    
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore("largeData", { keyPath: "id" });
    };
  });
};

const saveData = async (data) => {
  const db = await openDB();
  const transaction = db.transaction("largeData", "readwrite");
  const store = transaction.objectStore("largeData");
  
  for (const item of data) {
    store.add(item);
  }
  
  return new Promise((resolve, reject) => {
    transaction.oncomplete = () => resolve("Данные сохранены");
    transaction.onerror = () => reject(transaction.error);
  });
};

LocalStorage для простых данных:

// Сохранение
localStorage.setItem("userPreferences", JSON.stringify({
  theme: "dark",
  language: "ru"
}));

// Чтение
const preferences = JSON.parse(localStorage.getItem("userPreferences"));

// Удаление
localStorage.removeItem("userPreferences");
localStorage.clear(); // Очистить все

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

1. IndexedDB — используй для:

   • Больших объемов структурированных данных (изображения, документы, таблицы)
   • Офлайн-функционала с синхронизацией
   • Комплексных запросов по данным

2. LocalStorage — используй для:

   • Пользовательских настроек (тема оформления, язык)
   • Малых объемов данных (до 5-10 MB)
   • Простых ключ-значение пар

3. SessionStorage — используй для:

   • Временных данных текущей сессии
   • Кэша данных при навигации между страницами

4. Cache API — используй для:

   • Кэширования ассетов и HTTP ответов
   • Оффлайн-функциональности вместе с Service Workers

Проверка доступного объема

async function checkStorageQuota() {
  if (!navigator.storage) return;
  
  const estimate = await navigator.storage.estimate();
  const percentUsed = (estimate.usage / estimate.quota) * 100;
  
  console.log(`Использовано: ${estimate.usage} байт`);
  console.log(`Лимит: ${estimate.quota} байт`);
  console.log(`Процент использования: ${percentUsed.toFixed(2)}%`);
}

checkStorageQuota();

Важные особенности

• IndexedDB асинхронное и не блокирует основной поток
• LocalStorage синхронное, может замедлить приложение при большом объеме
• Браузеры могут запросить разрешение у пользователя на увеличение объема хранилища
• Приватный режим браузера может иметь отдельные лимиты
• На мобильных устройствах объемы обычно меньше

Вывод: IndexedDB имеет наибольший объем данных (от 50 MB до нескольких GB), что делает его наиболее подходящим выбором для приложений с большим объемом кэшированных или офлайн-данных.