Cookies в React-приложениях

Cookies — это небольшие текстовые данные, хранящиеся в браузере и автоматически отправляемые на сервер с каждым HTTP-запросом к тому же домену. В React-приложениях они используются в первую очередь для аутентификации и сессионного управления, а не для хранения клиентского состояния.

Как работают cookies

Когда сервер отвечает на запрос, он может установить cookie через заголовок Set-Cookie. Браузер сохраняет её и при последующих запросах к тому же домену автоматически добавляет в заголовок Cookie. Это позволяет серверу идентифицировать пользователя без передачи токена вручную.

Пример:

Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure

Ограничения cookies

  • Размер: максимум 4 КБ на cookie.
  • Количество: обычно не более 50 cookies на домен.
  • Производительность: каждая cookie отправляется со всеми запросами к домену, даже для изображений или статики — это увеличивает объём трафика.
  • Доступ из JavaScript: если cookie помечена как HttpOnly, она недоступна через document.cookie — это мера защиты от XSS.

Работа с cookies в React

Чтение и запись через JavaScript возможна только для не-HttpOnly cookies:

// Чтение
const cookies = document.cookie; // строка вида "key1=value1; key2=value2"

// Запись
document.cookie = "theme=dark; path=/";

Однако синтаксис неудобен: нет встроенного парсера или метода удаления. В рамках курса мы не будем использовать сторонние библиотеки (например js-cookie), поэтому вот пример кастомного хука для удобной работы с cookies:

function useCookie(key, defaultValue = '') {
  // Чтение при монтировании
  const [cookie, setCookie] = useState(() => {
    const match = document.cookie
      .split('; ')
      .find(row => row.startsWith(key + '='));
    return match ? decodeURIComponent(match.split('=')[1]) : defaultValue;
  });

  // Функция для записи
  const updateCookie = (value, days = 7) => {
    const expires = new Date(Date.now() + days * 864e5).toUTCString();
    document.cookie = `${key}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
    setCookie(value);
  };

  // Функция для удаления
  const deleteCookie = () => {
    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
    setCookie(defaultValue);
  };

  return [cookie, updateCookie, deleteCookie];
}

Этот хук позволяет работать с cookie как с реактивным состоянием:

const [theme, setTheme] = useCookie('theme', 'light');
// ...
setTheme('dark'); // сохранит в cookie и обновит состояние

Когда использовать cookies в React

  • Аутентификация через сессии: сервер выдаёт сессионный ID, сохраняет его в HttpOnly cookie — клиент не видит токен, но запросы аутентифицируются автоматически.
  • Междоменные сценарии: если API и фронтенд на разных поддоменах, cookies с флагом Domain могут быть общими.
  • Совместимость с legacy-системами, где аутентификация завязана на cookies.

Когда НЕ использовать

  • Для хранения настроек UI, кэша или состояния приложения — используйте localStorage.
  • Для данных, не нужных серверу — зачем отправлять их с каждым запросом?
  • Для сложных структур — cookies работают только со строками и требуют ручной сериализации.

В большинстве современных React-приложений cookies используются только для аутентификации, управляемой сервером, а всё остальное хранится в localStorage или в состоянии приложения.