Как сделать всплывающее окно об использовании cookies с сохранением выбора в cookie?

1. HTML-разметка

<div id="cookie-banner" class="cookie-ban
  <p>Мы используем cookie для улучшения работы сайта. Вы согласны?</p>
  <button id="accept-cookie">Принять</button>
  <button id="decline-cookie">Отклонить</button>
  <a href="/privacy-policy" target="_blank">Политика конфиденциальности</a>
</div>

2. CSS для стилизации

 .cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2c3e50;
  color: #fff;
  padding: 15px;
  text-align: center;
  z-index: 9999;
  display: none; /* Сначала скрыто */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.cookie-banner p {
  margin: 0 0 10px 0;
}

.cookie-banner button {
  margin: 0 5px;
  padding: 5px 15px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

#accept-cookie {
  background: #27ae60;
  color: white;
}

#decline-cookie {
  background: #e74c3c;
  color: white;
}

.cookie-banner a {
  color: #3498db;
  text-decoration: none;
  margin-left: 10px;
}

3. JavaScript (сохранение в Cookies)

 document.addEventListener('DOMContentLoaded',
  const cookieBanner = document.getElementById('cookie-banner');
  const acceptBtn = document.getElementById('accept-cookie');
  const declineBtn = document.getElementById('decline-cookie');

  // Функция для установки cookie
  function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
  }

  // Функция для получения cookie
  function getCookie(name) {
    const cookieName = name + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookies = decodedCookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      let cookie = cookies[i];
      while (cookie.charAt(0) === ' ') {
        cookie = cookie.substring(1);
      }
      if (cookie.indexOf(cookieName) === 0) {
        return cookie.substring(cookieName.length, cookie.length);
      }
    }
    return "";
  }

  // Проверяем, есть ли уже cookie
  if (!getCookie('cookie_consent')) {
    cookieBanner.style.display = 'block';
  }

  // Обработка согласия
  acceptBtn.addEventListener('click', function() {
    setCookie('cookie_consent', 'accepted', 30); // Сохраняем на 30 дней
    cookieBanner.style.display = 'none';
    // Здесь можно загружать аналитику (Google Analytics и т. д.)
    console.log('Cookie приняты');
  });

  // Обработка отказа
  declineBtn.addEventListener('click', function() {
    setCookie('cookie_consent', 'declined', 30); // Сохраняем на 30 дней
    cookieBanner.style.display = 'none';
    // Блокируем cookie (например, отключаем Google Analytics)
    console.log('Cookie отклонены');
  });
});

🔹 Как это работает?
✔ При первом посещении – показывается баннер.
✔ После выбора – в cookie записывается cookie_consent=accepted или declined.
✔ При повторном посещении – если cookie есть, баннер не показывается.

🔹 Важные моменты
✅ Срок хранения – в примере cookie хранится 30 дней (можно изменить).
✅ GDPR-совместимость – добавьте ссылку на политику конфиденциальности.
✅ Аналитика – подключайте Google Analytics только после согласия.

🔹 Проверка cookie
Чтобы убедиться, что cookie сохраняются, откройте Инструменты разработчика (F12) → Application → Cookies и проверьте значение cookie_consent.

#снипеты@computy

#GDPR #Cookie #JavaScript #ВебРазработка #Frontend