Логотип YeaHub

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

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

Тренажёр

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

Обучение

Навыки

Задачи

Войти

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

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

© 2026 YeaHub

AI info

Карта сайта

Документы

Медиа

Назад
Вопрос про 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 для небольших данных

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

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

  • Рейтинг:

    3

  • Сложность:

    7

Навыки

  • JavaScript

    JavaScript

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

#storage

#cache

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

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию