feat: add cookie article, some style fixes

2025-05-23 15:02:39 +03:00
parent a0e6c5c03c
commit 1a18557ec6
6 changed files with 142 additions and 45 deletions
--- a/docs/api/07-server-side-events.md
+++ b/docs/api/07-server-side-events.md
@@ -112,23 +112,23 @@ app.listen(3000, () => {
   - Сервер отправляет данные клиенту каждые 2 секунды.

 ## Преимущества SSE:
-1. Простота: Легко реализовать как на клиенте, так и на сервере.
-2. Автоматическое восстановление: Клиент автоматически переподключается при разрыве соединения.
-3. Эффективность: Меньше нагрузки на сервер по сравнению с polling.
+1. **Простота:** Легко реализовать как на клиенте, так и на сервере.
+2. **Автоматическое восстановление:** Клиент автоматически переподключается при разрыве соединения.
+3. **Эффективность:** Меньше нагрузки на сервер по сравнению с polling.

 ## Недостатки SSE:
-1. Односторонняя связь: Клиент не может отправлять данные серверу через SSE.
-2. Ограниченная поддержка браузеров: Не поддерживается в Internet Explorer.
-3. Ограничения протокола: Только текстовые данные.
+1. **Односторонняя связь:** Клиент не может отправлять данные серверу через SSE.
+2. **Ограниченная поддержка браузеров:** Не поддерживается в Internet Explorer.
+3. **Ограничения протокола:** Только текстовые данные.

 ## Когда использовать SSE:
-1. Уведомления: Например, уведомления о новых сообщениях.
-2. Обновления статуса: Например, статус заказа или задачи.
-3. Потоковая передача данных: Например, ленты новостей или обновления котировок.
+1. **Уведомления:** Например, уведомления о новых сообщениях.
+2. **Обновления статуса:** Например, статус заказа или задачи.
+3. **Потоковая передача данных:** Например, ленты новостей или обновления котировок.

 ## Альтернативы SSE:
-1. WebSockets: Для двусторонней связи в реальном времени.
-2. Long Polling: Когда SSE недоступен.
-3. Polling: Для простых сценариев.
+1. **WebSockets:** Для двусторонней связи в реальном времени.
+2. **Long Polling:** Когда SSE недоступен.
+3. **Polling:** Для простых сценариев.

 🚀 **_Источник: DeepSeek_**
--- a/docs/browser/07-cookie.md
+++ b/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)**
--- a/docs/react/01-intro.md
+++ b/docs/react/01-intro.md
@@ -61,5 +61,5 @@ sidebar_position: 1
 ## Итог
 **React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.

-🚀 **_Источник: DeepSeek_**
-🚀 **Источник: [https://www.youtube.com/playlist?list=PL_Ff6C61NLImA9pRrkFXp8yaWz1_RtFdQ](https://www.youtube.com/playlist?list=PL_Ff6C61NLImA9pRrkFXp8yaWz1_RtFdQ)**
+🚀 **_Источник: DeepSeek_** \
+🚀 **Источник: [Курс по базе официальной документации на react.dev](https://www.youtube.com/playlist?list=PL_Ff6C61NLImA9pRrkFXp8yaWz1_RtFdQ)**
--- a/docs/state-managers/02-redux.md
+++ b/docs/state-managers/02-redux.md
@@ -94,23 +94,23 @@ function Counter() {
 ```

 ## Преимущества Redux:
-1. Централизованное состояние:
+1. **Централизованное состояние:**
   - Всё состояние приложения хранится в одном месте, что упрощает управление и отладку.
-2. Предсказуемость:
+2. **Предсказуемость:**
   - Состояние изменяется только через действия и редьюсеры, что делает поведение приложения предсказуемым.
-3. Инструменты разработчика:
+3. **Инструменты разработчика:**
   - Redux DevTools позволяют отслеживать изменения состояния, отменять действия и многое другое.
-4. Масштабируемость:
+4. **Масштабируемость:**
   - Redux хорошо подходит для больших приложений с множеством компонентов и сложной логикой состояния.
-5. Сообщество и экосистема:
+5. **Сообщество и экосистема:**
   - Redux имеет огромное сообщество и множество дополнительных библиотек (например, Redux Thunk, Redux Saga).

 ## Недостатки Redux:
-1. Boilerplate:
+1. **Boilerplate:**
   - Redux требует написания большого количества кода (actions, reducers, store), что может быть избыточным для небольших приложений.
-2. Сложность:
+2. **Сложность:**
   - Для новичков Redux может показаться сложным из-за множества концепций и шагов.
-3. Производительность:
+3. **Производительность:**
   - Неправильное использование Redux может привести к лишним ререндерам компонентов.

 ## Redux Toolkit (RTK):
--- a/docs/state-managers/03-rtk-query.md
+++ b/docs/state-managers/03-rtk-query.md
@@ -22,34 +22,34 @@ sidebar_position: 3
   - RTK Query интегрируется с Redux DevTools, что позволяет отслеживать состояние запросов и кэша.

 Основные хуки RTK Query:
-1. useQuery:
+1. **useQuery:**
 - Используется для выполнения **GET**-запросов.
 - Возвращает объект с данными, состоянием загрузки (`isLoading`), ошибкой (~~error~~) и другими полезными полями.
 - Пример: `useGetPostsQuery()`.
-2. useMutation:
+2. **useMutation:**
 - Используется для выполнения **POST**, **PUT**, **DELETE** и других запросов, изменяющих данные на сервере.
 - Возвращает функцию для выполнения мутации и объект с состоянием (`isLoading`, `isError` и т.д.).
 - Пример: `useAddPostMutation()`.
-3. useLazyQuery:
+3. **useLazyQuery:**
 - Используется для выполнения запросов по требованию (например, при нажатии кнопки).
 - Пример: `const [fetchPost, { data }] = useLazyGetPostByIdQuery()`.

 ## Преимущества RTK Query:
-1. Минимум boilerplate-кода:
+1. **Минимум boilerplate-кода:**
   - RTK Query автоматически генерирует редьюсеры, действия и хуки.
-2. Кэширование:
+2. **Кэширование:**
   - Данные автоматически кэшируются, что предотвращает лишние запросы.
-3. Интеграция с Redux:
+3. **Интеграция с Redux:**
   - RTK Query легко интегрируется с существующим Redux-стором.
-4. Оптимизация:
+4. **Оптимизация:**
   - Автоматическое управление подписками и ререндерами.
-5. Поддержка TypeScript:
+5. **Поддержка TypeScript:**
   - RTK Query полностью поддерживает TypeScript, что делает её удобной для типизированных проектов.

 ## Недостатки RTK Query:
-1. Ограниченная гибкость:
+1. **Ограниченная гибкость:**
   - RTK Query ориентирована на REST API и GraphQL. Для более сложных сценариев может потребоваться ручная настройка.
-2. Зависимость от Redux:
+2. **Зависимость от Redux:**
   - Если в проекте не используется Redux, RTK Query может быть избыточной.

 ## Когда использовать RTK Query?
--- a/docs/state-managers/04-zustand.md
+++ b/docs/state-managers/04-zustand.md
@@ -11,39 +11,39 @@ Zustand — это минималистичная и современная би

 ## Основные особенности Zustand:

-1. Простота:
+1. **Простота:**
    - Zustand имеет минимальный API, что делает его очень простым в использовании.
    - Для начала работы достаточно создать store с помощью функции create.
-2. Минимум boilerplate:
+2. **Минимум boilerplate:**
    - В отличие от Redux, Zustand не требует настройки редьюсеров, действий или middleware.
-3. Реактивность:
+3. **Реактивность:**
    - Zustand автоматически отслеживает изменения состояния и обновляет компоненты, которые используют store.
-4. Гибкость:
+4. **Гибкость:**
    - Zustand позволяет хранить как простые, так и сложные состояния, включая асинхронные операции.
-5. Интеграция с React:
+5. **Интеграция с React:**
    - Zustand предоставляет хуки для удобного использования store в функциональных компонентах.
-6. Производительность:
+6. **Производительность:**
    - Zustand оптимизирован для минимизации лишних ререндеров.

 ## Преимущества Zustand:

-1. Минимализм:
+1. **Минимализм:**
    - Zustand предоставляет только необходимый функционал, без лишних сложностей.
-2. Простота интеграции:
+2. **Простота интеграции:**
    - Не требуется настройка провайдеров или обёрток, как в Redux.
-3. Производительность:
+3. **Производительность:**
    - Zustand оптимизирован для минимизации ререндеров.
-4. Гибкость:
+4. **Гибкость:**
    - Подходит как для простых, так и для сложных сценариев управления состоянием.
-5. TypeScript-поддержка:
+5. **TypeScript-поддержка:**
    - Zustand полностью поддерживает TypeScript, что делает его удобным для типизированных проектов.

 ## Недостатки Zustand:

-1. Ограничение в инструменте для отладки:
+1. **Ограничение в инструменте для отладки:**
    - В отличие от Redux, Zustand не имеет таких мощных инструментов, как Redux DevTools, но при этом практически
      полностью совместим и может использовать его для отладки.
-2. Меньше сообщества:
+2. **Меньше сообщества:**
    - Zustand менее популярен, чем Redux, поэтому может быть меньше ресурсов и примеров.

 ## Когда использовать Zustand?