> Можно ли работать с куки на фронтенде через JavaScript (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Сфера

Стек: JavaScript

> Пример ответа

Да, с куки на фронтенде можно работать через JavaScript. Для этого используется свойство document.cookie. Оно позволяет читать, создавать, изменять и удалять куки, но с некоторыми ограничениями.

Чтение куки: document.cookie возвращает строку со всеми куки, разделёнными точкой с запятой. Для удобства её парсят в объект.

Запись куки: Присваивание document.cookie = "key=value; path=/; max-age=3600" добавляет или обновляет куку. Важно указывать параметры, такие как path, domain, max-age или expires, secure, samesite.

Удаление куки: Устанавливается дата истечения в прошлом, например: document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/".

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

Куки с флагом HttpOnly недоступны через JavaScript (защита от XSS).
Размер куки ограничен (обычно ~4 КБ).
Для работы с куки в современных приложениях часто предпочитают localStorage или sessionStorage, но куки остаются незаменимыми для автоматической отправки на сервер и поддержки сессий.

Пример простой функции для работы с куки:

JAVASCRIPT
function setCookie(name, value, days) {
  const expires = days ? `; expires=${new Date(Date.now() + days * 864e5).toUTCString()}` : '';
  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
}

function getCookie(name) {
  return document.cookie.split('; ').reduce((r, c) => {
    const [key, val] = c.split('=');
    return key === name ? decodeURIComponent(val) : r;
  }, null);
}

function deleteCookie(name) {
  setCookie(name, '', -1);
}