Как сделать предупреждение об использовании cookie на сайте без плагина (используя локальное хранилище)

Привет всем, у кого есть свой сайт. Вы, скорее всего, знаете, что если у вас есть сайт, то он постоянно требует каких-то доработок и улучшений. То закон какой-то новый выйдет, то в SEO что-то изменится и так далее. Сегодня я покажу вам простой способ, как можно добавить на сайт предупреждение об использовании cookie без использования плагинов.

Конечно же, если у вас сайт на какой-то популярной платформе типа WordPress, то для предупреждения об использовании cookie можно установить любой из огромного количества плагинов, которые сделают всю работу за вас. Однако опытные вебмастера прекрасно знают, что чем больше на сайте плагинов, тем медленнее он работает, а это уже напрямую влияет на SEO. Поэтому если вы хоть немного понимаете код (CSS, JS, HTML), то лучше всего сделать предупреждение об использовании Cookie своими руками.

Все ли сайты используют Cookie

Этим вопросом задаются многие владельцы сайтов. Ответ очень простой – почти со 100% вероятностью ДА. Исключением могут быть только сайты, на которых нет вообще ничего, кроме текстового контента: ни счетчиков посещаемости, ни рекламы, ни форм обратной связи и так далее. В общем, если у вас хоть сколько-нибудь нормальное подобие современного сайта, то предупредить об использовании Cookie вы просто обязаны.

Почему я использовал Local Storage при написании предупреждения

Честно вам скажу, перед тем, как сделать такое предупреждение на своем сайте, я просмотрел несколько похожих статей с готовыми решениями. Но они мне не понравились. Объясняю чем. Во всех решениях были использованы cookie для работы этого функционала. Оно и не сильно странно, и даже логично. Но сейчас есть решение гораздо более удобное и простое – локальное хранилище браузера (local storage).

Работа локального хранилища очень похожа на работу cookie, но есть существенные отличия.

1. Каждый раз, когда что-то записывается в cookie (или стирается оттуда), то эта информация отправляется на сервер. А это дополнительная нагрузка на сервер. А если вы обрабатываете cookie сервером, а не клиентской частью, то это еще и дополнительные задержки времени. Local Storage же в отличие от Cookie никуда дальше браузера пользователя не уходит и хранится только там.
2. С локальным хранилищем удобнее работать, так как это самый обыкновенный объект. Cookie же представляют собой строку, которую постоянно приходится распарсивать, использовать регулярки или подключать дополнительный библиотеки для удобной работы с Cookie. А дополнительные библиотеки опять же негативно влияют на скорость работы вашего сайта.

Вот и во всех примерах, которые я находил в интернете для работы с cookie используют библиотеку jQuery да еще и с дополнительной мини библиотекой, которая позволят jQuery удобнее работать с кукисами. Есть примеры кода и на чистом Java Script, но они, как правило, очень громоздкие и неудобные.

Как я сделал предупреждение об использовании cookie на сайте без плагина

Код будет состоять из трех частей. Первый кусок – html разметка. Его нужно поместить куда-то в футер вашего сайта (в самый низ). Если у вас сайт на CMS, то ищите у него в корне шаблона файл footer.php. Если у вас какой-то простенький одностраничный сайт, то в самом низу найдите тег <footer></footer>. Внутри него обязательно будет еще какой-то код. Нет большой разницы, куда именно вы поместите наш код, но я бы советовал в самом конце этого тега, как раз перед </footer>.

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

Второй кусок – стили (CSS). Тут все просто. Вам нужно найти файл style.css или main.css и закинуть этот код в самый конец. Теперь ваше «предупреждение» должно выглядеть красиво и стильно, но… но на самом деле вы его не увидите вообще, пока не добавить код Java Script. Кстати стили я написал сразу адаптивными, чтобы ваше предупреждение об использовании Cookie выглядело ровно и адекватно не только на компьютерах, но также и на мобильных устройствах.

#cookie_notification{
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  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);
}

#cookie_notification p{
  margin: 0;
  font-size: 0.7rem;
  text-align: left;
  color: $color_text;
}


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

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

Третья часть – JS (Java Script) – самое вкусное во всем это творении. Как раз тут я использовал локальное хранилище браузера – быстрое, удобное, доступное. Код со скриптами вам нужно добавить в основной скриптовый файл (если у вас их несколько), который срабатывает абсолютно на всех страницах сайта.

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();

Когда вы все закончите, то вот, как у вас будет это выглядеть:

Сразу после использования кода

Cookie предупреждение в контексте сайта и с кнопкой стилизованной под общий стиль сайта

Как работает предупреждение об использование Cookie, которое я сделал

Да, для большинства из вас этот пункт, наверное, будет неинтересен. Вы просто вставите код, все заработает, и вы мысленно скажете мне спасибо. Но для тех из вас, кому интересно разобраться подробнее, я объясню некоторые ключевые моменты скрипта.

При каждой загрузке страницы выполняется коротенькая функция, которая проверяет объект Local Storage по ключу «cookieDate». Значение этого ключа по моей задумке будет какая-то дата в системе UNIX (точнее дата соглашения отдельного пользователя с тем, что ваш сайт использует cookie).

UNIX время — это количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года (источник — википедия)

Если прошло уже больше года с момента, когда мы показывали пользователю предупреждение, то есть если дата была получена по ключу и она на год (точнее, на 31536000000 миллисекунд) меньше текущей даты — мы показываем предупреждение, добавив ему класс «.show».

Также мы показываем это предупреждение в случае, если указанного ключа вообще не было в локальном хранилище. Это означает, что человек на нашем сайте впервые.

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

Вывод

Надеюсь, я смог помочь решить вашу проблему, и теперь вы знаете, как сделать на своем сайте предупреждение об использовании Cookie. Если у вас остались какие-то вопросы по поводу использования этого кода, то смело задавайте их в комментариях.

Кстати, если вы знаете, почему традиционно предупреждение о Cookie пишут с использованием самих же Cookie, а не Local Storage, сообщите мне, пожалуйста, об этом. Вдруг я делаю что-то не так. Хотя чисто технически код выполняет именно то, чего от него ждут.

Всем спасибо за внимание.