---
sidebar_position: 7
---

# Cookie

Файлы **cookie** используются веб-сайтами для хранения небольших объемов данных прямо в браузере пользователя. Они играют важную роль в авторизации, отслеживании сессий, персонализации и аналитике.

- **Cookie** – это простой способ хранить данные между запросами.
- **JavaScript** может управлять ими через `document.cookie`.
- **Используются** для авторизации, сессий, настроек, трекинга.
- **Осторожно:** Если не защищены (`Secure`, `HttpOnly`, `SameSite`), могут быть украдены через XSS.

## Как работают cookie в браузере?
   Когда вы заходите на сайт, сервер может отправить HTTP-заголовок `Set-Cookie`, и браузер сохранит эту информацию. При последующих запросах к тому же сайту браузер автоматически отправляет cookie обратно на сервер в заголовке `Cookie`.
```http request
HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; Path=/; Expires=Wed, 30 May 2025 12:00:00 GMT
```

Теперь при каждом запросе к этому домену браузер будет отправлять:

```http request
GET /profile HTTP/1.1
Cookie: session_id=abc123
```

## JavaScript и работа с cookie
   JavaScript может **читать, создавать, изменять и удалять** cookie через свойство `document.cookie`.

📌 Чтение всех cookie
```js
console.log(document.cookie);  
// Выведет строку вида "name=value; name2=value2"
```
📌 Установка новой cookie
```js
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
Просто перезапишите её с тем же именем:
```js
document.cookie = "username=Anna; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
```

📌 Удаление cookie
Установите `**expires**` в прошлое:
```js
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
```

## Примеры использования cookie в JS

🔹 Сохранение авторизации
```js
// После успешного входа
document.cookie = `auth_token=${token}; max-age=3600; path=/; secure`;
```
🔹 Запоминание пользовательских настроек
```js
// Сохраняем тему
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';
```
🔹 Корзина покупок
```js
// Добавление товара
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: Настройка, Использование и Безопасность](https://www.youtube.com/watch?v=Xqc3T9QtqvI)**