Предупреждение о Cookie для сайта на JavaScript

Все чаще на иностранных и российских сайтах, при первом заходе, нас встречает уведомление об использовании на куки. Такое уведомление на сайты ставят чтобы соблюсти закон о «персональных данных». Европейский регламент GDPR однозначен: если ваш сайт рассчитан на аудиторию из стран Евросоюза, согласие пользователей со сбором куки обязательно. Из российского закона о персональных данных (№ 152-ФЗ) не понятно входят ли куки в эти самые «персональные данные».

В этом законе говориться, что ресурс должен представить посетителю политику сбора и обработки персональных данных (https://www.consultant.ru/document/cons_doc_LAW_61801/cbf4e15b7c330f9372e876cdf2bc928bad7950ef/), но при этом освобождается от этой обязанности, если ресурс уведомил посетителя об осуществлении обработки его персональных данных (Статья 18, пункт 4).

Для уведомление посетителя сайта о куках сделаем плашку внизу сайта, она будет появляться при первом заходе посетителя на сайт, если посетитель нажмет на кнопку «Я согласен», но сайт запомнит его на год и плашка больше показываться не будет. Все это сделаем на чистом JavaScript.

Создадим плашку об уведомлении о Cookie

Обычно для верстки я использую Bootstrap, поэтому кнопку в плашке использую оттуда. Вот CSS стили плашки:

#cookie_note{
    display: none;
    position: fixed;
    bottom: 15px;
    left: 50%;
    max-width: 90%;
    transform: translateX(-50%);
    padding: 20px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}

#cookie_note p{
    margin: 0;
    font-size: 0.7rem;
    text-align: left;
    color: black;
}

.cookie_accept{
    width:20%;
}
@media (min-width: 576px){
    #cookie_note.show{
        display: flex;
    }
}

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

Вот HTML, добавим его ближе к концу body страницы:

<!-- START Cookie-Alert -->
<div id="cookie_note">
    <p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями
        использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании
        файлов cookie, <a href="#" target="_blank">нажмите здесь</a>.</p>
    <button class="button cookie_accept btn btn-primary btn-sm">Я согласен</button>
</div>
<!-- END Cookie-Alert -->

JavaScript для предупреждения о cookie

Скрипт очень простой, в нем 3 функции для установки, получения и проверки куков, ниже код с комментариями:

<script>
    function setCookie(name, value, days) {
        let expires = "";
        if (days) {
            let date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    function getCookie(name) {
        let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }


    function checkCookies() {
        let cookieNote = document.getElementById('cookie_note');
        let cookieBtnAccept = cookieNote.querySelector('.cookie_accept');

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

        // При клике на кнопку устанавливаем куку cookies_policy на один год
        cookieBtnAccept.addEventListener('click', function () {
            setCookie('cookies_policy', 'true', 365);
            cookieNote.classList.remove('show');
        });
    }

    checkCookies();
    
</script>

В итоге, при первом заходе на сайт, наши посетители будут получать такое уведомление:

JS