Заметки фрилансера

???? Cookie — это файл с данными, который сохраняется на компьютере пользователя после посещения сайта.

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

✔️ Закон о персональных данных в РФ (№ 152-ФЗ) напрямую не сообщает, входят ли куки в понятие «персональных данных». Но на практике случаи такого определения куки в суде уже были. А вот европейский регламент GDPR однозначен: если ваш сайт рассчитан на аудиторию из стран Евросоюза, согласие пользователей со сбором куки обязательно. Для получения согласия разместите на сайте уведомление об использовании куки: краткую плашку с информацией и кнопкой.

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

1. Разместим блок самого сообщения на странице, желательно в самом конце страницы, перед закрывающим тегом body:

<div id="cookie_notification">
<p>Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.</p>
<button class="btn btn-light cookie_accept">Принять</button>
</div>

2. Ниже размещаем стили оформления блока

<style type="text/css">
#cookie_notification{
display: none;
justify-content: space-between;
align-items: flex-end;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 25px;
background:rgba(0, 0, 0, 0.75);
z-index: 1000;
color: white;
}

#cookie_notification p{
margin: 0;
font-size: 0.85rem;
text-align: left;
}


@media (min-width: 576px){
#cookie_notification.show{
display: flex;
}

}

@media (max-width: 575px){
#cookie_notification.show{
display: block;
text-align: left;
}

}
</style>

3. Размещаем скрипт, который как раз отвечает за показ и скрытие блока.  Тут используется, кстати, не cookies, а local storage - более быстрое решение для хранения небольших объемов данных

<script type="text/javascript">
function checkCookies(){
let cookieDate = localStorage.getItem('cookieDate');
let cookieNotification = document.getElementById('cookie_notification');
let cookieBtn = cookieNotification.querySelector('.cookie_accept');

// Если записи про кукисы нет или она просрочена на 1 год, то показываем информацию про кукисы
if( !cookieDate || (+cookieDate + 31536000000) < Date.now() ){
cookieNotification.classList.add('show');
}

// При клике на кнопку, в локальное хранилище записывается текущая дата в системе UNIX
cookieBtn.addEventListener('click', function(){
localStorage.setItem( 'cookieDate', Date.now() );
cookieNotification.classList.remove('show');
})
}
checkCookies();
</script>

Вот и все, теперь мы работаем в рамках закона :)