JavaScript - Атрибуты куки
Здравствуйте,野心勃勃的网页开发者们！今天，我们将踏上一段甜蜜的旅程，探索cookies的世界。不，不是巧克力曲奇那种（虽然我也希望是！），而是让我们的网络体验更加顺畅和个性化的数字cookies。所以，拿起你的虚拟牛奶，让我们沉浸到JavaScript Cookie Attributes的美味话题中！
Атрибуты куки
Прежде чем мы погрузимся в детали, давайте поймем, что такое атрибуты куки. Представьте cookies как маленькие записки, которые ваш браузер хранит о вас. Атрибуты куки — это как особые инструкции на этих записках, которые говорят браузеру, как обращаться с ними. Они критически важны для безопасности, функциональности и пользовательского опыта.
Вот быстрый обзор основных атрибутов куки, которые мы будем обсуждать:
| Атрибут | Описание |
|---|---|
| Name/Value | Основные данные куки |
| Path | Указывает, какие пути на сервере могут получить доступ к куки |
| Expires | Устанавливает дату истечения срока действия куки |
| Max-Age | Определяет, как долго куки должны действовать |
| Domain | Определяет, какие домены могут использовать куки |
Проверка значения атрибута в браузере
Прежде чем мы начнем устанавливать куки, давайте научимся их проверять. Откройте инструменты разработчика вашего браузера (обычно F12), перейдите на вкладку Application или Storage и найдите Cookies. Это как заглянуть в cookie jar!
// Установить простой куки
document.cookie = "username=John Doe";
// Проверить его в консоли
console.log(document.cookie);Когда вы выполните этот код и проверите вашу консоль, вы увидите "username=John Doe". Так просто устанавливать и читать базовый куки!
Атрибут Name/Value куки
Пара имя/значение — это сердце куки. Это как ключ и соответствующий ему клад.
// Установить куки с именем и значением
document.cookie = "favoriteColor=blue";
// Установить несколько куки
document.cookie = "favoriteAnimal=dog";
document.cookie = "favoriteNumber=42";
// Читать куки
console.log(document.cookie);Это выведет все ваши куки. Помните, что每一ое присваивание document.cookie добавляет новый куки, а не перезаписывает существующие!
Атрибут Path куки
Атрибут path определяет, какие страницы на вашем сайте могут получить доступ к куки. Это как сказать куки, в какие комнаты дома вашего сайта ей разрешено входить.
// Установить куки для определенного пути
document.cookie = "user=Alice; path=/dashboard";
// Установить куки для всего сайта
document.cookie = "theme=dark; path=/";В этом примере куки "user" доступен только в пути "/dashboard" и его подпутях, в то время как куки "theme" доступен по всему сайту.
Атрибут Expires куки
Атрибут expires устанавливает определенную дату, когда куки должен быть удален. Это как поставить срок годности на молоко!
// Установить куки, который истекает через 7 дней
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = "subscription=premium; expires=" + expirationDate.toUTCString();Этот куки самоуничтожится через 7 дней. Миссия невыполнима, но в стиле куки!
Атрибут maxAge куки
Атрибут maxAge устанавливает, как долго куки должен действовать в секундах. Это как таймер обратного отсчета для вашего куки.
// Установить куки, который действует в течение 1 часа
document.cookie = "session=active; max-age=3600";
// Установить куки, который удаляется немедленно
document.cookie = "tempData=123; max-age=0";Первый куки будет действовать в течение часа, в то время как второй — это как самоуничтожающееся сообщение — он исчезает сразу после создания!
Атрибут Domain куки
Атрибут domain указывает, какие домены могут получить доступ к куки. Это как решить, какие друзья могут делиться вашим секретным рецептом.
// Установить куки для текущего домена и всех его поддоменов
document.cookie = "language=en; domain=.example.com";
// Установить куки для exact домена
document.cookie = "userId=12345; domain=shop.example.com";В первом примере куки доступен на example.com и всех его поддоменах (например, blog.example.com). Второй куки доступен только для shop.example.com.
Теперь давайте объединим все это в более сложный пример:
function setCookie(name, value, days, path, domain, secure) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires +
(path ? "; path=" + path : "") +
(domain ? "; domain=" + domain : "") +
(secure ? "; secure" : "");
}
// Использование
setCookie("username", "JohnDoe", 7, "/", "example.com", true);Эта функция позволяет вам устанавливать куки с всеми обсуждаемыми атрибутами. Это как швейцарский армейский нож для создания куки!
Помните, что куки — это мощные инструменты, но с великой силой приходит великая ответственность. Всегда будьте внимательны к конфиденциальности и безопасности пользователей при использовании куки.
И вот и все, друзья! Теперь вы хорошо подготовлены к работе с куки в JavaScript. В следующий раз, когда вы будете browse веб и он запомнит ваши предпочтения, вы будете знать сладкую тайну за этим. Счастливого кодирования и пускай ваши куки всегда будут свежими и безопасными!
Credits: Image by storyset