Узнайте о файлах cookie в JavaScript.

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

Кроме того,

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

Примечание. Имя, значение и длину файла cookie можно ограничить.

Поля в куки

Cookie может хранить пять полей, как показано ниже:

  • Истекает — дата истечения срока действия файла cookie. Если срок действия не указан, срок действия файла cookie истечет, когда посетитель закроет браузер.
  • Домен — доменное имя вашего сайта.
  • Путь — путь к каталогу или веб-странице, которая устанавливает файл cookie. Оставьте это поле пустым, если вы хотите получить файл cookie из любого каталога или веб-страницы.
  • Безопасный — файл cookie извлекается с безопасного сервера только в том случае, если это поле содержит слово «безопасный». Если это поле пустое, то такого ограничения нет.
  • Name=Value — файлы cookie устанавливаются и извлекаются в виде пар ключ-значение.

ПРИМЕЧАНИЕ. Помните, что все значения файлов cookie видны конечному пользователю и могут быть изменены им.

Типы файлов cookie

  1. Основные файлы cookie — файлы cookie, созданные и прочитанные только вашим веб-сайтом.
  2. Сторонние файлы cookie — файлы cookie, создаваемые сторонней рекламой на вашем веб-сайте. Читается любым веб-сайтом, использующим рекламный код, с целью персонализированной или целенаправленной рекламы.
  3. Сеансовые файлы cookie — файлы cookie, сохраняемые в вашем браузере и уничтожаемые при его закрытии.

Создание куки

Мы можем создать файл cookie в JavaScript, используя свойство document.cookie в строковом формате с парами (ключ-значение), разделенными точкой с запятой.

Пример:

document.cookie = "key1=value1; expires=date; path=/;";

Теперь давайте посмотрим на другой пример файла cookie ниже:

Хранение информации, такой как имя пользователя:

document.cookie = "username=medium/nikhil";

Срок действия файла cookie:

document.cookie = “username=medium/nikhil; expires=Thu, 28 Dec 2021 12:00:00 UTC”;

Если срок действия не указан, файл cookie удаляется при закрытии браузера.

Путь сообщает браузеру, к какому пути относится файл cookie:

document.cookie = “username=medium/nikhil; expires=Thu, 28 Dec 2021 12:00:00 UTC; path=/”;

По умолчанию файл cookie принадлежит текущей странице, если он не был объявлен при создании файла cookie.

ПРИМЕЧАНИЕ. С помощью этого метода мы можем установить/обновить отдельный файл cookie.

Чтение куки

Cookie просто и легко читается в JavaScript как:

let cookies = document.cookie;

ПРИМЕЧАНИЕ. document.cookie возвращает все файлы cookie в виде одной строки, например cookies=”key1=value1; key2=value2; key3=value3”.

Обновление куки

Аналогично тому, как мы создали cookie, мы также можем обновить их:

document.cookie = “username=medium/new; path=/”;

ПРИМЕЧАНИЕ: это перезапишет предыдущее значение файла cookie.

Удаление куки

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

document.cookie = “expires=Thu, 28 Dec 2021 12:00:00 UTC; path=/”;

Если мы хотим удалить его сразу, то обновите max-age до ZERO.

document.cookie = “max-age=0”;

ИЛИ, обновите дату истечения срока действия до прошлой даты.

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

ПРИМЕЧАНИЕ. Некоторым браузерам требуется значение пути, чтобы разрешить удаление файла cookie.

Ссылки

До следующего раза

Надеюсь, эта статья оказалась для вас полезной, и спасибо, что прочитали ее. Если у вас есть какие-либо отзывы, пожалуйста, поделитесь ими тоже.

Я на @buymeacoffee. Если вам нравятся мои работы, вы можете купить мне ☕ и поделиться своими мыслями 🎉 https://www.buymeacoffee.com/nikhilwali2

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.