5.1 Основные свойства куки
Куки (cookies) — это небольшие фрагменты данных, которые веб-сайты могут сохранять на стороне клиента (в браузере пользователя). Они появились за 20 лет до localStorage и все это время помогали выполнять их функции. Даже сейчас они часто используются для сохранения информации о состоянии сессии, предпочтений пользователя, трекинга и других задач.
Основные свойства куки:
- Имя и значение
name=value: ключ-значение, которое хранит данные. - Домен и путь
domain,path: определяют, к каким URL-адресам и доменам куки применимы. - Время жизни
expires,max-age: определяет, когда куки истекает и удаляется. - Безопасность
secure,HttpOnly: указывает, как и когда куки можно передавать.
Установка куки
Куки могут быть установлены с помощью JavaScript или серверного кода. В JavaScript для этого используется свойство document.cookie.
Пример установки куки с JavaScript:
document.cookie = "username=JohnDoe";
Дополнительные параметры куки:
expires: указывает дату истечения срока действия куки. После этой даты куки будет удалена.path: определяет путь, для которого куки действительны. Обычно используется/, чтобы сделать куки доступными для всего сайта.domain: определяет домен, для которого куки действительны.secure: если установлено, куки будут передаваться только по HTTPS.HttpOnly: если установлено, куки не могут быть доступны через JavaScript (только серверной стороной).
Пример установки куки с дополнительными параметрами:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Управление куки
1. Чтение куки
Все куки для текущего документа хранятся в одной длинной строке в document.cookie. Чтобы получить значение куки, необходимо разобрать эту строку.
Пример чтения куки:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Получение значения куки "username"
const username = getCookie('username');
console.log(username); // Выведет: JohnDoe
2. Обновление куки
Чтобы обновить значение куки, достаточно установить его снова с тем же именем, но с новым значением и параметрами.
Пример обновления куки:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Удаление куки
Для удаления куки необходимо установить для нее истекший срок действия.
Пример удаления куки:
// Установка истекшего срока действия
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Примеры работы с куки
Объяснение:
setCookie: устанавливает куки с заданным именем, значением и временем жизни (в днях)getCookie: возвращает значение куки по заданному имениdeleteCookie: удаляет куки по заданному имени
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username" присвоено значение "JohnDoe" на 7 дней');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" имеет значение: ' + cookieValue);
} else {
alert('Cookie "username" не найдена');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" удалена');
}
</script>
</body>
</html>
5.4 Установка cookie на стороне сервера
Рассмотрим работу с HttpOnly и Secure куки на сервере (Node.js).
Пример:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 дней
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Secure server cookie set');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie value: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
Примеры использования куки:
- Аутентификация: куки часто используются для хранения сессионных токенов, которые удостоверяют пользователя между запросами.
- Предпочтения пользователей: куки могут хранить пользовательские настройки, такие как язык интерфейса или темы.
- Трекинг пользователей: куки могут использоваться для отслеживания поведения пользователей на сайте для аналитики и персонализации контента.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ