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

Установить cookie в браузере можно несколькими способами.

1. Через HTTP-заголовок Set-Cookie с сервера. Это основной метод для установки cookie, который происходит на стороне сервера. Сервер отправляет браузеру заголовок Set-Cookie, который instructрует браузер сохранить определенную пару ключ-значение.

   Пример HTTP-ответа с сервера:

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=johndoe; Expires=Thu, 21 Dec 2023 12:00:00 GMT; Path=/; Secure; HttpOnly
   Set-Cookie: settings=theme=dark&lang=en; Path=/
   

   Параметры заголовка Set-Cookie:

   • name=value: Имя и значение cookie. Обязательный параметр.
   • Expires=<date>: Дата и время, когда cookie истекает. Если не указан, cookie является сессионным и удаляется при закрытии браузера. Формат даты - RFC 1123.
   • Max-Age=<seconds>: Максимальное время жизни cookie в секундах. Имеет приоритет над Expires.
   • Domain=<domain>: Домен, для которого cookie доступен. По умолчанию - текущий домен (но не поддомены).
   • Path=<path>: Путь на сервере, для которого cookie доступен. По умолчанию - корневой путь /.
   • Secure: Флаг, указывающий, что cookie должен отправляться только по HTTPS.
   • HttpOnly: Флаг, указывающий, что cookie недоступен для JavaScript через document.cookie. Защищает от XSS-атак.
   • SameSite=<mode>: Управляет отправкой cookie при кросс-сайтовых запросах. Возможные значения: Strict, Lax (по умолчанию), None.

2. Через JavaScript на стороне клиента. С помощью объекта document.cookie можно читать, записывать и удалять cookie.

   Запись cookie:

   // Установка простого cookie
   document.cookie = "username=johndoe";
   
   // Установка cookie с expires, path, secure и SameSite=Lax
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 дней
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Чтение cookie:

   // document.cookie возвращает строку всех доступных cookie в формате "key1=value1; key2=value2; ..."
   console.log(document.cookie);
   

   Удаление cookie: Для удаления cookie нужно установить его с датой истечения в прошлом.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Установить expires в прошлое
   

   Важно при удалении указывать те же параметры path и domain (если были установлены), что и при создании. SameSite также должен совпадать для корректного удаления.

3. С помощью сторонних библиотек JavaScript. Существуют библиотеки, упрощающие работу с cookie (например, js-cookie). Они предоставляют более удобный API для установки, получения и удаления cookie.

   Пример с js-cookie:

   // Подключение библиотеки
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Установка cookie
   Cookies.set('username', 'johndoe');
   
   // Установка cookie с опциями
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires в днях
   
   // Получение cookie
   const username = Cookies.get('username'); // Возвращает 'johndoe' или undefined
   const allCookies = Cookies.get(); // Возвращает объект со всеми cookie
   
   // Удаление cookie
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Указать path, если он был при установке