JavaScript и куки

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в аппетитное путешествие в мир куки. Нет, не те, которые макают в молоко (хотя мне бы не помешал один такой прямо сейчас), а цифровые, которые делают наши веб-опыт smoother и более персонализированными. Так что наденьте ваш виртуальный фартук и давайте начнем печь... то есть программировать!

Что такое куки?

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

Когда я впервые узнал о куки, я представил себе крошечных компьютерных гномов, которые пишут заметки и прячут их в мой ПК. Хотя это не совсем так, это не плохой способ visualize концепцию!

Почему нужны куки?

Вы можете задаться вопросом: "Why websites can't remember things without these cookie things?" Well, let me tell you a little story.

Представьте, что вы находитесь в忙ном кафе. Вы заказываете кофе и сэндвич, но затем вам нужно сходить в туалет. Когда вы возвращаетесь, как бариста узнает,谁的订单 среди множества клиентов? Вот где на помощь приходят куки в цифровом мире.

Куки нужны по нескольким причинам:

1. Запоминание предпочтений пользователя
2. Поддержание пользователей в состоянии входа
3. Отслеживание товаров в корзинах
4. Персонализация опыта пользователей
5. Анализ поведения пользователей для улучшений

Без куки, каждый раз, когда вы посещаете веб-сайт, это было бы как встреча впервые - без памяти о ваших предпочтениях, без сохраненного входа, без товаров в вашей корзине. Не очень удобно, правда?

Как это работает?

Теперь давайте заглянем под капот и посмотрим, как на самом деле работают эти цифровые куки. Не волнуйтесь; это не так сложно, как может показаться!

Когда вы посещаете веб-сайт, он может отправить куки вашему браузеру. Ваш браузер затем хранит этот куки на вашем компьютере. В следующий раз, когда вы посещаете тот же веб-сайт, ваш браузер отправляет куки обратно на веб-сайт. Это как тайный握手 между вашим компьютером и веб-сайтом.

Вот простая схема того, как это работает:

User visits website
↓
Website sends cookie
↓
Browser stores cookie
↓
User revisits website
↓
Browser sends cookie
↓
Website recognizes user

Теперь, когда мы понимаем основы, давайте натянем рукава и начнем работать с куки в JavaScript!

Установка/хранение куки

Установка куки похожа на оставление заметки для себя на потом. В JavaScript мы используем Свойство document.cookie для создания куки. Вот как вы можете это сделать:

document.cookie = "username=John Doe";

Давайте разберем это:

• document.cookie - это Свойство, которое мы используем для взаимодействия с куки.
• "username=John Doe" - это сам куки. Это ключ-значение, где username - это ключ, а John Doe - это значение.

Вы также можете устанавливать несколько куки:

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

Каждое утверждение document.cookie создает новый куки. Оно не перезаписывает существующие.

Чтение куки

Чтение куки похоже на перебирание тех заметок, которые вы оставили для себя. Вот как вы можете читать куки:

let allCookies = document.cookie;
console.log(allCookies);

Это даст вам все куки в виде одной длинной строки. Но обычно вам нужно получить значение конкретного куки. Вот функция для этого:

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// Использование
let username = getCookie("username");
console.log(username); // Выводит: John Doe

Эта функция разделяет строку куки, циклически обрабатывает каждый куки и возвращает значение, если находит совпадение.

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

Куки resemble молоко - они могут испортиться, если их оставить слишком долго. По умолчанию куки истекают в конце сеанса браузера. Но вы можете установить конкретную дату истечения срока действия:

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

Этот куки истечет через один месяц. Атрибут expires сообщает браузеру, когда удалить куки.

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

Иногда вам нужно扔ить куки. Чтобы удалить куки, установите его дату истечения срока действия на过去的 дату:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Это устанавливает значение куки в пустое и его дату истечения срока действия на время в прошлом, эффективно удаляя его.

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

Обновление куки так же просто, как установить его снова с новым значением:

document.cookie = "username=Jane Doe";

Если куки с именем "username" уже существует, это обновит его значение. Если его нет, он создаст новый куки.

Таблица методов куки

Вот удобная таблица, резюмирующая методы, которые мы узнали:

Действие	Метод
Установка куки	document.cookie = "key=value";
Чтение всех куки	let allCookies = document.cookie;
Чтение конкретного куки	Используйте функцию getCookie()
Установка даты истечения срока действия	document.cookie = "key=value; expires=date";
Удаление куки	Установите дату истечения срока действия на прошедшую дату
Обновление куки	Установите куки снова с новым значением

И вот оно,folks! Вы теперь equipped с знаниями, чтобы работать с куки в JavaScript. Помните, с большой силой приходит большая ответственность. Всегда уважайте конфиденциальность пользователей и будьте transparent о вашем использовании куки.

В следующий раз, когда вы browse веб и сайт запоминает ваши предпочтения, вы можете улыбнуться knowingly и подумать, "Ah, куки в работе!" Счастливого кодирования, и пусть ваши цифровые куки всегда будут свежими, а настоящие куки всегда вкусными!

Credits: Image by storyset