Предупреждение об использовании cookies на сайте

9 июня 2021

В соответствии с 152-ФЗ «О персональных данных» и европейским регламентом GDPR — General Data Protection Regulation, о сборе на сайте куки пользователь должен быть предупрежден.
И должен дать конкретное, информированное и сознательное согласие.
Обычно для этого на сайте размещают форму с информацией и кнопкой подтверждения.

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

Частенько предупреждение о куках и записывают в куки. Это вполне рабочая схема. Недостатком этого способа будет необходимость каждый раз передавать эту информацию от браузера к серверу и обратно.

В браузере есть замечательная штука localStorage. Это один из способов хранить данные сайта на стороне клиента. Вот localStorage идеально подходит для хранения такой информации.
JavaScript на стороне клиента проверяет есть ли отметка с сайта в localStorage.
Если нет показывает предупреждение о cookie и ставит такую отметку – устанавливает текущую дату в переменную.
В localStorage браузера данные хранятся бессрочно (только Safari удалит через 7 дней, в остальных браузерах ограничений на срок нет)

JavaScript

window.addEventListener( 'load', function() {
	// console.log('All assets are loaded')
	warningAboutCookies();	
} );

// Функция проверяет наличие переменной в localStorage
// в cookieAcceptWarningDate записывается дата загрузки сайта в браузер
// если cookieAcceptWarningDate не существует или дата больше 1 года от текущей
// показывается сообщение о cookies
function warningAboutCookies() {
	const body = document.querySelector( 'body' );
	let cookieAcceptWarningDate = localStorage.getItem('cookieAcceptWarningDate');
	// 1 год = 365*24*60*60*1000 = 31536000000 милисекунд
	if( !cookieAcceptWarningDate || (+cookieAcceptWarningDate + 31536000000) < Date.now() ) {
			// Нет записи в localStorage или дата записи просрочена 
			// показываем сообщение
			let cookieWarning = document.createElement( 'div' );

			cookieWarning.classList.add( 'cookie-accept-warning' );

			let cookieWarningText = document.createElement( 'p' );
			cookieWarningText.innerHTML = `
				Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie.<br>
				Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов.<br>
				Обработка вашей персональной информации на нашем сайте производится в соответствии с 
				<a href="/privacypolicy/">политикой конфеденциальности</a>.<br>
				Вы всегда можете отключить файлы cookie в настройках Вашего браузера.
				`;
			cookieWarning.appendChild(cookieWarningText);

			let cookieWarningAccept = document.createElement('button');
			cookieWarningAccept.innerText = 'Принять';
			cookieWarningAccept.classList.add('cookie-accept', 'button');
			cookieWarningAccept.addEventListener('click', function() {
					localStorage.setItem( 'cookieAcceptWarningDate', Date.now() );
					cookieWarning.remove();
				})
			cookieWarning.appendChild(cookieWarningAccept);
			body.appendChild( cookieWarning );
		}
}

SCSS

// main.scss
@import 'cookie-warning';
@import 'media';

// cookie-warning.scss
.cookie-accept-warning {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 15px;
  left: 50%;
  width: 900px;
  max-width: 90%;
  transform: translateX(-50%);
  padding: 25px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
  p {
    margin: 0;
    font-size: 0.7rem;
    text-align: left;
    color: var(--basic-color-text-dark);
  }
  .cookie-accept {
    border-radius: 5px !important;
  }
}
// media.scss
@media (max-width: 946px) {
  // Предупреждение об использовании cookies на сайте
  .cookie-accept-warning {
    display: block;
  }
  .cookie-accept {
    margin: 10px auto 0;
    
  }
}

Если нет времени и желания разбираться самостоятельно – обращайтесь