97 lines
4.9 KiB
Markdown
97 lines
4.9 KiB
Markdown
---
|
||
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)** |