Cookies: document.cookie

Cookies — это небольшие фрагменты данных (не более ~4 КБ каждый), которые сайт сохраняет в браузере и которые автоматически прикрепляются к каждому запросу, отправляемому на тот же origin. Именно это отличает cookies от других клиентских хранилищ: они передаются на сервер, поэтому они являются классическим механизмом для идентификаторов сессий, токенов «запомнить меня», а также языковых настроек и тем оформления, которые необходимо знать серверу. В этом руководстве рассматривается, как читать, записывать и удалять cookies с помощью document.cookie, какие атрибуты управляют их областью действия и временем жизни, а также когда стоит воспользоваться другим вариантом хранилища.

Как работает document.cookie

document.cookie — обманчиво простое свойство. При чтении оно возвращает все cookies для текущего документа в виде одной строки пар name=value, разделённых точкой с запятой. При записи оно устанавливает один cookie за раз — и что важно, присвоение значения не перезаписывает всю строку. Браузер разбирает ваше присвоение и объединяет этот один cookie с уже существующим набором:

// Reading: returns everything as one string
document.cookie; // "theme=dark; lang=en; sessionId=abc123"

// Writing: adds/updates ONE cookie, leaves the rest intact
document.cookie = "username=John";

Атрибуты, которые вы добавляете (path, expires, Secure, …), доступны только для записи — они настраивают cookie, но никогда не возвращаются при чтении document.cookie. Вы получаете обратно только пары name=value.

Создание cookie

Чтобы создать cookie, присвойте строку name=value свойству document.cookie, при необходимости дополнив её атрибутами, разделёнными ;. Если значение содержит пробелы, точки с запятой или другие специальные символы, закодируйте его с помощью encodeURIComponent, чтобы не нарушить синтаксический анализ:

Это создаёт cookie с именем username и значением John Doe (закодированным для обработки пробела), срок действия которого истекает 8 июня 2025 года, и который доступен на всём сайте (path=/).

Атрибуты cookie

Атрибуты добавляются к строке присвоения и управляют тем, куда отправляется cookie и как долго оно живёт. Наиболее важные из них:

Без expires или max-age вы получаете сессионный cookie, который исчезает при закрытии браузера.

Установка срока действия

Используйте expires для абсолютной даты или max-age для относительного времени жизни в секундах. max-age обычно удобнее, так как не требует форматирования даты:

Этот cookie userSettings истекает через 24 часа (86 400 секунд) после создания.

Чтение конкретного cookie

Поскольку document.cookie возвращает все cookies в одной строке, получение одного значения требует её разбора. Надёжный вспомогательный метод добавляет в начало строки ; , чтобы одно и то же разбиение работало как для первого cookie, так и для всех остальных:

Если нужно перебрать все cookies, разделите строку по ; и разберите каждую пару самостоятельно:

Удаление cookie

Команды «удалить» не существует — cookie удаляется путём повторной установки с датой истечения в прошлом (или max-age=0). Главный подводный камень: необходимо использовать те же path и domain, с которыми cookie было создано, иначе браузер воспримет это как другой cookie и оставит оригинал нетронутым.

Установка expires=Thu, 01 Jan 1970 00:00:00 UTC даёт тот же результат для браузеров, которые предпочитают expires вместо max-age.

Безопасность cookies

Когда cookie содержит что-то чувствительное (прежде всего токен сессии), атрибуты важны не меньше самого значения:

• Secure — отправляет cookie только по HTTPS, предотвращая его утечку через незашифрованное HTTP-соединение.
• SameSite — управляет тем, прикрепляется ли cookie к межсайтовым запросам. Lax (современное значение по умолчанию) блокирует его при большинстве межсайтовых запросов, защищая от CSRF; Strict — самый строгий вариант; None (требует Secure) предназначен для случаев реального межсайтового использования.
• HttpOnly — полностью скрывает cookie от JavaScript, защищая токены сессий от кражи через XSS. Нельзя установить через document.cookie; сервер должен передать его через заголовок ответа Set-Cookie. Именно поэтому сессионные cookies, как правило, управляются на стороне сервера.

document.cookie = "sessionId=abc123; expires=Sat, 08 Jun 2025 12:00:00 UTC; path=/; Secure; SameSite=Lax";

Cookies и localStorage

Cookies — не единственное клиентское хранилище, и для большинства данных они не являются лучшим выбором. Используйте cookies только тогда, когда данные нужны серверу при каждом запросе:

Если вам нужно просто запомнить что-то на стороне клиента, а сервер это никогда не читает, localStorage или sessionStorage проще и вместительнее; Storage API рассматривается подробно. Поскольку cookies автоматически передаются с запросами, они также взаимодействуют с правилами CORS — см. межсайтовые запросы с Fetch для отправки учётных данных между origins.

Заключение

Cookies по-прежнему остаются стандартным способом передачи небольших фрагментов состояния на сервер — сессий, аутентификации и серверных настроек. Записывайте их по одному через document.cookie, ограничивайте область действия с помощью path/domain, управляйте временем жизни через expires/max-age, и защищайте их с помощью Secure, SameSite и (на стороне сервера) HttpOnly. Для хранения больших объёмов данных только на клиенте предпочтительнее Web Storage.

Практика