Cookies — это небольшие файлы, которые хранятся у пользователя в браузере и позволяют сайтам запоминать информацию о пользовательских предпочтениях или действиях. В этой статье мы вспомним немного истории и узнаем как легко реализовать уведомление о использовании cookies и управлять ими с помощью JavaScript, HTML и CSS.

Идея использования cookies возникла в начале 1990-х годов, когда веб-разработчики начали искать способы сохранять состояние пользователя между различными запросами на сервер. До появления cookies каждый раз при загрузке страницы браузер «знал» только о текущем запросе, что ограничивало функциональность сайтов, особенно в вопросах авторизации и пользовательских настроек.

В 1994 году Луи Бартон, один из инженеров Netscape Communications, предложил использовать небольшие файлы для хранения информации на стороне клиента, что позволило сайтам «запоминать» пользователя, его предпочтения и действия. Так появились первые cookies, которые быстро стали неотъемлемой частью веб-технологий.

С тех пор cookies развивались и совершенствовались, позволяя создавать более интерактивные, персонализированные и безопасные онлайн-сервисы. Сегодня они широко используются для аналитики, рекламы, аутентификации и улучшения пользовательского опыта.

Почему важны cookies и зачем показывать уведомление ?

Современные сайты обязаны информировать пользователей о сборе и обработке их данных, согласно законодательству (Федеральному закону N°152-ФЗ). Поэтому важно показывать пользователю уведомление о cookies и получать его согласие.

HTML-разметка для уведомления о использовании cookies

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

<div class="cookies-popup">
  <div class="cookies-popup__wrapper">
    <p class="cookies-popup__content">
      Мы используем файлы cookies для улучшения работы сайта. Продолжая использовать сайт, вы даёте согласие на обработку файлов cookies в соответствии с Федеральным законом N°152-ФЗ «О персональных данных». Подробнее о правилах обработки в
      <a href="#" target="_blank">Политике обработки персональных данных</a>.
    </p>
    <button class="cookies-popup__btn">Ок</button>
  </div>
</div>

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

Стилизация с помощью SCSS

Чтобы сделать уведомление привлекательным и аккуратным, добавим немного стилей:

/* ------------------------------------------------------------------------------------------------------------------------------
COOKIES POPUP
--------------------------------------------------------------------------------------------------------------------------------*/
.cookies-popup {
	position: fixed;
	bottom: 0;
	right: 10px;

	max-width: 415px;
	padding: 15px;
	border-radius: 10px;
	z-index: 9999;

	background-color: rgb(0, 0, 0, 0.15);
	color: black;

	font-weight: 300;
	font-size: 16px;

	transition: transform 0.8s;
	transform: translateY(120%);

	&--show {
		transform: translateY(0%);

		@include sm {
			width: 100%;
			left: 0;
			max-width: none;
			border-radius: 0;

			bottom: 0;
		}
	}

	a {
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}

	&__wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;

		gap: 15px;
	}

	&__btn {
		font-weight: 700;

		width: 100%;
		box-sizing: inherit;
		padding: 10px 30px;
		border-radius: 10px;	
		cursor: pointer;

		color: white;
		background-color: blue;

		transition: background-color 0.3s;

		&:hover {
			filter: brightness(1.2);
		}
	}
}

JavaScript для управления cookie и отображения уведомления

Теперь создадим скрипт, который будет показывать уведомление о использовании cookies на сайте, если пользователь еще не дал согласие, и сохранять его выбор в cookie:

// Импортируем функцию проверки cookies в main.js
import checkCookies from "./modules/cookies";

// Запускаем проверку с настройками
checkCookies({ days: 365 });

А сам модуль checkCookies выглядит так:

export default function checkCookies(opts = {}) {
  const defOptions = {
    days: 365,
  };
  const options = Object.assign(defOptions, opts);

  const cookieNote = document.querySelector(".cookies-popup");
  const cookieBtnAccept = cookieNote.querySelector(".cookies-popup__btn");

  // Если cookie 'cookies_policy' нет или просрочена, показываем уведомление
  if (!getCookie("cookies_policy") && cookieNote) {
    cookieNote.classList.add("cookies-popup--show");
  }

  // При клике на кнопку сохраняем согласие
  if (cookieBtnAccept) {
    cookieBtnAccept.addEventListener("click", () => {
      setCookie("cookies_policy", "true", options.days);
      cookieNote.classList.remove("cookies-popup--show");
    });
  }
}

// Устанавливает cookie
function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
}

// Получает cookie по имени
function getCookie(name) {
  const matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

Теперь при первом заходе на сайт пользователь увидит уведомление о cookies. После нажатия на кнопку «Ок» выбранное согласие сохраняется в cookie и уведомление исчезает. При дальнейшем посещении сайта, cookie уже существует, и уведомление не показывается.

Полезные статьи по теме:

Кнопка Наверх. JS модуль для верстальщика.
Табы на JS. Модуль для верстальщика.