Файлы cookie: document.cookie

В мире веб-разработки эффективное управление данными имеет решающее значение. Одним из фундаментальных способов обработки данных на стороне клиента является использование файлов cookie. Файлы cookie — это небольшие объемы данных, хранящиеся в браузере пользователя. Они играют важную роль в улучшении пользовательского опыта и функциональности, запоминая информацию о состоянии для веб-страницы. В этом руководстве мы подробно рассмотрим, как управлять файлами cookie с помощью JavaScript, и предоставим вам практические примеры кода для интеграции в ваши проекты.

Создание файлов cookie с помощью JavaScript

Чтобы создать файл cookie, вам просто нужно присвоить строку свойству document.cookie. Эта строка должна содержать пару ключ-значение, представляющую имя и значение файла cookie. При необходимости вы можете установить атрибуты, такие как срок действия, путь, домен и безопасность для файла cookie. Атрибут domain контролирует область действия: по умолчанию файлы cookie ограничиваются текущим хостом и его поддоменами. Установка domain=.example.com делает файл cookie доступным для всех поддоменов, в то время как domain=app.example.com ограничивает его только этим конкретным поддоменом.

Вот как можно создать базовый файл cookie:

Эта строка кода создает файл cookie с именем username и значением John Doe (закодированным для безопасной обработки пробела), устанавливает срок его действия на 8 июня 2025 года и делает его доступным для всего сайта. Если значение содержит пробелы или специальные символы, всегда кодируйте его с помощью encodeURIComponent, чтобы избежать проблем с парсингом.

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

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

warning

Всегда указывайте дату истечения срока действия для ваших файлов cookie, чтобы гарантировать, что они будут храниться только в течение запланированного времени.

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

Получение файлов cookie в JavaScript

Получение файлов cookie включает чтение строки document.cookie, как вы уже видели в примере выше. Эта строка содержит все файлы cookie для текущего домена, хранящиеся в списке, разделенном точкой с запятой. Чтобы найти конкретный файл cookie, вы можете разделить эту строку и просмотреть полученный массив:

Удаление файлов cookie

Чтобы удалить файл cookie, вы можете установить дату его истечения на прошлую дату. Это фактически делается путем присвоения атрибуту expires даты, которая уже наступила. Примечание: Обязательно укажите те же точные значения атрибутов path и domain, которые использовались при создании файла cookie, иначе браузер его не удалит.

Установив дату истечения на 1 января 1970 года, вы заставите браузер удалить файл cookie немедленно.

Безопасная работа с атрибутами файлов cookie

При работе с файлами cookie, содержащими конфиденциальную информацию, безопасность становится приоритетной. Чтобы повысить безопасность файлов cookie, вы можете использовать атрибуты Secure и SameSite через JavaScript. Обратите внимание, что атрибут HttpOnly нельзя установить на стороне клиента; он должен быть настроен на сервере.

• Secure: Гарантирует, что файл cookie отправляется только по HTTPS, предотвращая его раскрытие через незащищенное HTTP-соединение.
• SameSite: Ограничивает отправку файлов cookie вместе с межсайтовыми запросами, помогая предотвратить атаки CSRF.

warning

Если ваш сайт обслуживается по HTTPS, добавьте атрибут Secure ко всем файлам cookie, чтобы предотвратить передачу данных по незащищенным соединениям.

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

Этот файл cookie защищен и ограничивает межсайтовые запросы. (Защита HttpOnly должна настраиваться на стороне сервера.)

Заключение

Файлы cookie — это мощный инструмент для управления пользовательскими данными и настройками в веб-приложениях. Понимая, как создавать, получать и безопасно управлять файлами cookie с помощью JavaScript, разработчики могут значительно улучшить пользовательский опыт на своих сайтах. Всегда помните о необходимости осторожного обращения с файлами cookie, особенно при работе с персональными или конфиденциальными данными.

Практика