Какие браузерные хранилища подходят для кэширования данных и в чём их отличия?

Обзор браузерных хранилищ

Для кэширования данных на стороне клиента в браузере доступно несколько механизмов: localStorage, sessionStorage, cookies, IndexedDB и Cache Storage. Каждый из них имеет свои особенности по объёму, времени жизни и способу доступа, что определяет их применение.

localStorage

Хранит данные в виде пар ключ-значение (строки) с лимитом около 5-10 МБ. Данные сохраняются после закрытия браузера и не имеют срока действия. Подходит для кэширования небольших объёмов статической информации, например, настроек пользователя.

// Сохранение в localStorage
localStorage.setItem('theme', 'dark');
// Чтение
const theme = localStorage.getItem('theme');
console.log(theme); // 'dark'

sessionStorage

Аналогичен localStorage, но данные живут только в рамках текущей вкладки и удаляются при её закрытии. Лимит также около 5-10 МБ. Используется для временных данных, например, состояния формы на одной странице.

// Сохранение в sessionStorage
sessionStorage.setItem('formData', JSON.stringify({name: 'John'}));
// Чтение
const data = JSON.parse(sessionStorage.getItem('formData'));

Cookies

Небольшие текстовые данные до 4 КБ, которые автоматически отправляются на сервер с каждым HTTP-запросом. Имеют срок действия, задаваемый через Expires или Max-Age. Используются для аутентификации и отслеживания сессий, но не для кэширования больших объёмов.

// Установка cookie
document.cookie = 'sessionId=abc123; max-age=3600; path=/';
// Чтение всех cookies
console.log(document.cookie);

IndexedDB

Объектно-ориентированная база данных в браузере, поддерживающая большие объёмы (сотни МБ и более). Позволяет хранить структурированные данные, включая файлы и Blob. Асинхронный доступ через транзакции. Идеален для кэширования сложных данных, например, офлайн-приложений.

// Открытие базы данных
const request = indexedDB.open('myDB', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(['store'], 'readonly');
  const store = transaction.objectStore('store');
  const getRequest = store.get('key');
  getRequest.onsuccess = () => console.log(getRequest.result);
};

Cache Storage

Часть Service Worker API, предназначенная для кэширования HTTP-ответов. Позволяет сохранять запросы и ответы для работы в офлайн-режиме. Лимит зависит от браузера, но обычно значительный. Используется в Progressive Web Apps (PWA).

// Открытие кэша и добавление ответа
caches.open('v1').then(cache => {
  cache.add('/api/data');
});
// Чтение из кэша
caches.match('/api/data').then(response => {
  if (response) console.log('Данные из кэша');
});

Вывод

Выбор хранилища зависит от задачи: для небольших строковых данных с длительным хранением используйте localStorage, для временных — sessionStorage, для аутентификации — cookies, для больших объёмов структурированных данных — IndexedDB, для кэширования HTTP-запросов в PWA — Cache Storage. Правильное применение этих механизмов улучшает производительность и пользовательский опыт.