Vue Front-end Инженер

Vue Front-end Инженер

Роадмап навыков для прокачки

Установка и получение Cookie

Browser API → Хранилища → Cookie

Основная идея

Cookie управляются через свойство document.cookie. Установка cookie выполняется присваиванием строки с параметрами, а чтение возвращает все cookie в виде одной строки, которую нужно парсить.

Ключевые аспекты

  • Установка — document.cookie = "name=value; expires=...; path=/"
  • Чтение — document.cookie возвращает все cookie как строку "name1=value1; name2=value2"
  • Удаление — установка cookie с прошедшей датой expires
  • Параметры — expires, max-age, path, domain, secure, SameSite
  • Кодирование — значения нужно кодировать через encodeURIComponent()

Плюсы

  • Нативная поддержка браузерами
  • Автоматическая отправка на сервер с каждым запросом
  • Гибкие настройки срока жизни и области видимости

Минусы

  • Неудобный API для работы (строковый формат)
  • Ограничение размера (4 КБ на cookie)
  • Необходимость ручного парсинга при чтении
  • Нет встроенных методов для удаления

Частые ошибки на собеседованиях

  • Забывают кодировать специальные символы через encodeURIComponent()
  • Не указывают path=/ — cookie видна только для текущего пути
  • Путают expires (дата) и max-age (секунды)
  • Пытаются прочитать httpOnly cookie через JavaScript (невозможно)

Введение и проблематика

Cookie — один из старейших механизмов хранения данных в браузере. В отличие от localStorage/sessionStorage, cookie автоматически отправляются на сервер с каждым HTTP-запросом. Однако API для работы с cookie в JavaScript неудобен — это простое строковое свойство без методов.

Свойство document.cookie работает не как обычное свойство объекта. При записи оно добавляет/обновляет cookie, а при чтении возвращает все cookie сразу.

Особенности document.cookie

js
// Запись НЕ перезаписывает все cookie, а добавляет/обновляет одну
document.cookie = "user=John";
document.cookie = "theme=dark";
 
// Чтение возвращает ВСЕ cookie одной строкой
console.log(document.cookie); // "user=John; theme=dark"

Базовая теория

Cookie представляет собой строку вида name=value с опциональными параметрами:

text
name=value; expires=date; max-age=seconds; path=/; domain=.example.com; secure; SameSite=Strict
ПараметрОписаниеПример
expiresДата истечения (UTC)expires=Thu, 01 Jan 2025 00:00:00 GMT
max-ageВремя жизни в секундахmax-age=3600
pathПуть, для которого доступна cookiepath=/
domainДомен, для которого доступна cookiedomain=.example.com
secureТолько по HTTPSsecure
SameSiteЗащита от CSRFSameSite=Strict
⚠️

Если не указать path, cookie будет видна только для текущего пути и его подпутей. Обычно используют path=/ для доступа со всех страниц сайта.

Практические примеры

js
// Cookie без параметров — удалится при закрытии браузера
document.cookie = "username=Иван";
js
// Спецсимволы нужно кодировать
const value = "Иван Петров; email@test.com";
document.cookie = `user=${encodeURIComponent(value)}`;
js
// Cookie на 7 дней, доступная для всего сайта
const expires = new Date();
expires.setDate(expires.getDate() + 7);
 
document.cookie = `theme=dark; expires=${expires.toUTCString()}; path=/`;
js
// document.cookie возвращает строку всех cookie
console.log(document.cookie);
// "username=%D0%98%D0%B2%D0%B0%D0%BD; theme=dark; session=abc123"
 
// Функция для получения значения конкретной cookie
function getCookie(name) {
  const cookies = document.cookie.split('; ');
 
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split('=');
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
 
  return null;
}
 
// Использование
const theme = getCookie('theme'); // 'dark'
const user = getCookie('username'); // 'Иван'
js
// Для удаления устанавливаем прошедшую дату expires
function deleteCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
}
 
// Или используем max-age=0
function deleteCookieAlt(name) {
  document.cookie = `${name}=; max-age=0; path=/`;
}
 
deleteCookie('theme');

Пограничные кейсы

⚠️

Важно: При удалении cookie нужно указать тот же path и domain, что и при установке. Иначе cookie не удалится.

js
// Cookie установлена с path=/admin
document.cookie = "token=abc; path=/admin";
 
// Это НЕ удалит cookie (другой path)
document.cookie = "token=; max-age=0; path=/";
 
// Это удалит cookie (тот же path)
document.cookie = "token=; max-age=0; path=/admin";
🚫

httpOnly cookie: Cookie с флагом httpOnly недоступны через JavaScript. Они устанавливаются только сервером и защищают от XSS-атак.

js
// Сервер установил: Set-Cookie: session=xyz; httpOnly
document.cookie; // session НЕ будет в этой строке

Продвинутые аспекты

js
function setCookie(name, value, options = {}) {
  const {
    expires,
    maxAge,
    path = '/',
    domain,
    secure,
    sameSite = 'Lax'
  } = options;
 
  let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
 
  if (expires instanceof Date) {
    cookieString += `; expires=${expires.toUTCString()}`;
  }
  if (maxAge !== undefined) {
    cookieString += `; max-age=${maxAge}`;
  }
  if (path) {
    cookieString += `; path=${path}`;
  }
  if (domain) {
    cookieString += `; domain=${domain}`;
  }
  if (secure) {
    cookieString += '; secure';
  }
  if (sameSite) {
    cookieString += `; SameSite=${sameSite}`;
  }
 
  document.cookie = cookieString;
}
 
// Использование
setCookie('user', 'Иван', { maxAge: 86400 }); // на 1 день

expires vs max-age

js
// expires — конкретная дата
const date = new Date();
date.setMonth(date.getMonth() + 1);
document.cookie = `test=1; expires=${date.toUTCString()}`;
 
// max-age — количество секунд от текущего момента
document.cookie = "test=1; max-age=2592000"; // 30 дней
 
// max-age имеет приоритет, если указаны оба
// max-age=0 или отрицательное значение — удаление cookie

Плюсы и минусы

АспектПреимуществаНедостатки
APIПростая установкаСложное чтение и парсинг
СерверАвтоматическая отправкаУвеличивает трафик
Размер—Максимум 4 КБ
БезопасностьhttpOnly, secure, SameSite—
СовместимостьПоддержка всеми браузерами—

Вопросы интервьюера

Q: Как установить cookie на 30 дней?

Использовать max-age=2592000 (30 × 24 × 60 × 60) или вычислить дату и использовать expires.

Q: Почему document.cookie = "a=1" не перезаписывает все cookie?

document.cookie — это геттер/сеттер, а не обычное свойство. Присваивание добавляет или обновляет одну cookie, не трогая остальные.

Q: Как узнать, что cookie скоро истечёт?

Из JavaScript узнать дату истечения невозможно. document.cookie возвращает только name=value без метаданных.

Q: Что такое SameSite и зачем он нужен?

SameSite контролирует отправку cookie при cross-site запросах. Защищает от CSRF-атак. Значения: Strict (только same-site), Lax (same-site + навигация), None (всегда, требует secure).

Источники