Cookies: чтение и запись с помощью JS

Что такое Cookies? 🍪

Cookies — это небольшие текстовые данные, которые браузер хранит на компьютере пользователя. Они помогают сохранять информацию между сеансами (например, логины, настройки, корзину покупок).

💡 Интересный факт: Название "cookie" (печенье) придумали программисты Netscape в 1990-х. Оно отсылает к идее "магического печенья" — маленького кусочка данных, который передаётся между клиентом и сервером.

Как работают Cookies? 🔄

Когда сервер отправляет HTTP-ответ, он может включить заголовок Set-Cookie. Браузер сохраняет этот cookie и автоматически отправляет его обратно серверу с каждым последующим запросом.

Set-Cookie: username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/

Чтение Cookies в JavaScript 📖

В JavaScript доступ к cookies осуществляется через свойство document.cookie. Оно возвращает все cookies в виде строки:

const allCookies = document.cookie;
console.log(allCookies); // "username=JohnDoe; theme=dark; lang=en"

Но работать с такой строкой неудобно. Давай напишем функцию для чтения конкретного cookie:

function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split('=');
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

console.log(getCookie('theme')); // "dark"

🔥 Производительность: Для частых операций с cookies лучше использовать библиотеки вроде js-cookie, но понимание нативного API важно!

Запись Cookies в JavaScript ✍️

Чтобы установить cookie, мы снова используем document.cookie, но теперь присваиваем ему строку с параметрами:

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

Создадим универсальную функцию для записи:

function setCookie(name, value, daysToLive = 365) {
  const date = new Date();
  date.setTime(date.getTime() + (daysToLive * 24 * 60 * 60 * 1000));
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
}

setCookie('theme', 'dark', 30); // Установит cookie на 30 дней

⚠️ Важно: Всегда используйте encodeURIComponent/decodeURIComponent для значений cookie — они могут содержать специальные символы!

Удаление Cookies 🗑️

Для удаления cookie нужно установить его с прошедшей датой истечения:

function deleteCookie(name) {
  setCookie(name, '', -1); // Установка cookie с отрицательным сроком жизни
}

deleteCookie('theme'); // Cookie "theme" будет удалён

Параметры Cookies ⚙️

При установке cookie можно указать дополнительные параметры:

Пример с несколькими параметрами:

document.cookie = "auth_token=abc123; max-age=3600; path=/; secure; samesite=strict";

Практический пример: Тема сайта 🌓

Давай реализуем переключатель тем с сохранением выбора в cookies:

<button id="themeToggle">Переключить тему</button>

// Проверяем сохранённую тему при загрузке
const savedTheme = getCookie('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

// Вешаем обработчик на кнопку
document.getElementById('themeToggle').addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';

  document.documentElement.setAttribute('data-theme', newTheme);
  setCookie('theme', newTheme, 365); // Сохраняем выбор на год
});

Ограничения и особенности 🚧

1. Размер: Обычно до 4KB на cookie (зависит от браузера)
2. Количество: Около 50 cookies на домен (в некоторых браузерах больше)
3. Безопасность: Не храните чувствительные данные (пароли, токены) в cookies без защиты
4. HTTP-only: Сервер может установить cookie с флагом HttpOnly, тогда JavaScript не сможет его прочитать

Альтернативы Cookies 🆕

Для хранения данных на клиенте также можно использовать:

• localStorage — постоянное хранилище (до 5MB)
• sessionStorage — хранилище на время сессии
• IndexedDB — база данных в браузере

Но cookies остаются лучшим выбором, когда данные нужно передавать на сервер с каждым запросом.

Проверь себя! 🧠

1. Какой метод используется для чтения всех cookies?
2. Почему важно кодировать значения cookie?
3. Как правильно удалить cookie?
4. Какие параметры cookie помогают защитить от атак?

Попробуй реализовать систему запоминания последнего посещённого раздела на сайте с помощью cookies! 🚀