Как установить и прочитать Cookie в браузере?

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

Установка Cookie

Чтобы установить куку из JavaScript, вы присваиваете строку свойству document.cookie. Эта строка должна содержать имя, значение и дополнительные атрибуты, разделённые точкой с запятой. Важно: присваивание не перезаписывает все существующие куки, а добавляет или обновляет только указанную.

// Установка простой куки
document.cookie = "username=JohnDoe";

// Установка куки с параметрами: срок действия, путь и флаг Secure
const expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 7); // Кука на 7 дней
document.cookie = `sessionId=abc123; expires=${expiryDate.toUTCString()}; path=/; Secure`;

Чтение Cookie

Все куки для текущего домена доступны как одна строка через document.cookie. Чтобы получить значение конкретной куки, эту строку нужно распарсить.

// Получение всех кук в виде строки
const allCookies = document.cookie; // Например: "username=JohnDoe; sessionId=abc123"

// Функция для получения значения по имени
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return value;
  }
  return null;
}

console.log(getCookie('username')); // Выведет: JohnDoe

Ключевые атрибуты и применение

• expires и max-age: определяют срок жизни куки. Без них кука будет сессионной и удалится при закрытии браузера.
• path: указывает путь на сервере, для которого кука будет отправляться. По умолчанию — текущий путь.
• domain: позволяет указать домен, для которого кука действительна.
• Secure: кука будет отправляться только по защищённому протоколу HTTPS.
• HttpOnly: этот атрибут, устанавливаемый сервером, запрещает доступ к куке из JavaScript, что защищает от XSS-атак.

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

Вывод: Используйте куки, когда вам необходимо хранить данные, которые должны автоматически отправляться на сервер с каждым запросом, например, токены аутентификации или идентификаторы сессии. Для хранения больших объёмов данных, не требующих отправки на сервер, предпочтительнее использовать localStorage или sessionStorage.