Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: storage, cache

Где хранить кэшированные данные? (LocalStorage, IndexedDB). Что делать, если IndexedDB не поддерживается?

Этот вопрос исследует различные подходы к хранению данных на клиентской стороне и стратегии fallback при отсутствии поддержки современных API.

Короткий ответ

Для кэширования данных используйте LocalStorage для небольших текстовых данных (до 5MB), IndexedDB для больших объемов и сложных структур. Если IndexedDB не поддерживается, можно использовать LocalStorage как fallback, либо реализовать полифилл для IndexedDB. Для совсем старых браузеров можно использовать cookies или серверное хранение.

Длинный ответ

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

Сравнение технологий хранения:

LocalStorage:

  • Объем: ~5MB

  • Тип данных: Только строки

  • Доступ: Синхронный

  • Использование:

// Простые данные
localStorage.setItem('user', JSON.stringify(userData));
const user = JSON.parse(localStorage.getItem('user'));

IndexedDB:

  • Объем: ~50% от свободного места

  • Тип данных: Любые JS объекты

  • Доступ: Асинхронный

  • Использование:

const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(['store'], 'readwrite');
  const store = transaction.objectStore('store');
  store.put(data, 'key');
};

Стратегия fallback:

Определение поддержки:

const isIndexedDBSupported = () => {
  return 'indexedDB' in window;
};

const isLocalStorageSupported = () => {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return true;
  } catch (e) {
    return false;
  }
};

Универсальный адаптер:

class StorageAdapter {
  constructor() {
    this.supported = this.detectSupport();
  }

  detectSupport() {
    if (isIndexedDBSupported()) return 'indexeddb';
    if (isLocalStorageSupported()) return 'localstorage';
    return 'none';
  }

  async set(key, value) {
    switch (this.supported) {
      case 'indexeddb':
        return await this.setIndexedDB(key, value);
      case 'localstorage':
        return this.setLocalStorage(key, value);
      default:
        throw new Error('No storage support');
    }
  }

  setLocalStorage(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  }

  async setIndexedDB(key, value) {
    // Реализация IndexedDB
  }
}

Полифиллы:

  • Использование библиотек like localForage

  • Кастомная реализация на LocalStorage для небольших данных

  • Серверное кэширование как крайний вариант

Уровень

  • Рейтинг:

    3

  • Сложность:

    7

Навыки

  • JavaScript

    JavaScript

Ключевые слова

#storage

#cache

Подпишись на React Developer в телеграм