feat: add cookie article, some style fixes

docs/browser/07-cookie.md

@@ -0,0 +1,97 @@
+---
+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)**