4.9 KiB
sidebar_position
| sidebar_position |
|---|
| 7 |
Cookie
Файлы cookie используются веб-сайтами для хранения небольших объемов данных прямо в браузере пользователя. Они играют важную роль в авторизации, отслеживании сессий, персонализации и аналитике.
- Cookie – это простой способ хранить данные между запросами.
- JavaScript может управлять ими через
document.cookie. - Используются для авторизации, сессий, настроек, трекинга.
- Осторожно: Если не защищены (
Secure,HttpOnly,SameSite), могут быть украдены через XSS.
Как работают cookie в браузере?
Когда вы заходите на сайт, сервер может отправить HTTP-заголовок Set-Cookie, и браузер сохранит эту информацию. При последующих запросах к тому же сайту браузер автоматически отправляет cookie обратно на сервер в заголовке Cookie.
HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; Path=/; Expires=Wed, 30 May 2025 12:00:00 GMT
Теперь при каждом запросе к этому домену браузер будет отправлять:
GET /profile HTTP/1.1
Cookie: session_id=abc123
JavaScript и работа с cookie
JavaScript может читать, создавать, изменять и удалять cookie через свойство document.cookie.
📌 Чтение всех cookie
console.log(document.cookie);
// Выведет строку вида "name=value; name2=value2"
📌 Установка новой cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
Параметры:
expires– срок действия (если не указать, cookie удалится при закрытии браузера).max-age– время жизни в секундах (альтернативаexpires).path=/– на каких страницах доступна cookie (по умолчанию текущий путь).domain– для какого домена (по умолчанию текущий).secure– передавать только по HTTPS.samesite– защита от CSRF (Strict,Lax,None).
📌 Изменение cookie Просто перезапишите её с тем же именем:
document.cookie = "username=Anna; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
📌 Удаление cookie
Установите **expires** в прошлое:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
Примеры использования cookie в JS
🔹 Сохранение авторизации
// После успешного входа
document.cookie = `auth_token=${token}; max-age=3600; path=/; secure`;
🔹 Запоминание пользовательских настроек
// Сохраняем тему
document.cookie = "theme=dark; max-age=2592000"; // 30 дней
// Читаем тему
const cookies = document.cookie.split(';').map(c => c.trim());
const themeCookie = cookies.find(c => c.startsWith('theme='));
const theme = themeCookie ? themeCookie.split('=')[1] : 'light';
🔹 Корзина покупок
// Добавление товара
let cart = JSON.parse(localStorage.getItem('cart') || '[]');
cart.push({ id: 123, name: "Phone" });
document.cookie = `cart=${JSON.stringify(cart)}; max-age=86400`;
Ограничения cookie
- Размер: Обычно до 4 КБ на cookie.
- Количество: Зависит от браузера (~50 на домен).
- Доступ: Только для своего домена (если не указан
domain). - Безопасность: Уязвимы к XSS, если не стоит
HttpOnly(тогда JS не сможет читать).
Альтернативы cookie
- localStorage / sessionStorage – больше места (5-10 МБ), но не отправляются на сервер автоматически.
- JWT (JSON Web Tokens) – для авторизации без куки.
- IndexedDB – для хранения больших объемов данных.
🚀 Источник: DeepSeek
🚀 Источник: Cookies. Все, что нужно знать о Cookies: Настройка, Использование и Безопасность