Уведомление о КУКИ на сайте

Уведомление о КУКИ на сайте

6 247 в JavaScript 2 Видео

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

Вообще, вывод информера о Cookies файлах — это требование закона 152-ФЗ, в том случае, если вы собираете персональные данные пользователя. Например, вывели форму обратной связи или установили форму авторизации и автоматически подпали под действие закона.

Наша задача состоит в том, чтобы показать информационное окошко в том случае, если мы ранее не посещали данный сайт и не соглашались с условиями использования сайта. У данного окошка есть время жизни, можно установить любой интервал, спустя который окошко будет показываться вновь. Это может быть 1 день, неделя, месяц и т.д.

Демо / Исходники

Давайте уже начнем писать код, но прежде давайте глянем на демо, что мы вообще получим на выходе. Исходный код можете глянуть на Github.

Писать данное информер я буду на чистом HTML, CSS, JavaScript. Чтобы не тратить много времени на написание базовых стилей я подключил Normalize.css. Далее в качестве сборщика я тут использовал такой инструмент, как Parcel. Очень удобная вещь, особенно когда нужно быстро что-то собрать. Данный инструмент практически не требует никаких настроек. Можно было конечно обойтись и без него, но мне так удобнее, тем более, что в JS я использую ES6 синтаксис. А тут уже необходимо использовать полифил для поддержки более старых браузеров. Короче, parcel сделает тут все за меня.

Если вы загляните в файл index.html на Github, то увидите, что кроме небольшого текста-заглушки там ничего нет, я имею ввиду исходный код информационного окошка Cookies. Код окошка будет вставляться динамически через JS, если нет установленной куки.

Я не буду тут говорить про стилизацию данного окошка, так как тут все элементарно и вообще можно оформить под стиль вашего сайта. Тут больше будет интересен вопрос программирования на JavaScript.

Для работы с файлами куки я установил небольшую js-библиотеку под названием JavaScript Cookie. Можно конечно и свой плагин написать, но я предпочитаю не изобретать велосипеды, так как любой код требует отладки и устранения багов, а это время…

Давайте разберем файл cookies.js в моем проекте. В данном файле хранится код, который собственно и показывает окошко при посещении сайта.

Показывать информер мы будет при условии, что нет установленной куки, поэтому начинаем с условия:

import Cookies from 'js-cookie'

const COOKIES_NAME = 'visit'
if (!Cookies.get(COOKIES_NAME)) { ... }

Методом Cookies.get() мы получаем куки по названию. Название я сразу вынес в отдельную константу. То есть, если данный метод вернет false (и это говорит о том, что установленной cookie нет) мы выполним код, заключенный в фигурных скобках. Обратите внимание на знак инверсии !.

И так, если кука с названием visit (название можно задать любое) не установлена, то выполним следующие действия — добавим динамически html-код окошка перед закрывающим тегом body. И сразу же получим объекты самого окна и кнопочки согласия с условиями.

document.querySelector('body').insertAdjacentHTML('beforeend', getHtml())
const cookiesAlert = document.querySelector('.cookies-alert--js')
const cookiesBtn = document.querySelector('.cookies-alert__btn--js')

Обратите внимание на селекторы по классам. Обычно для работы с js я задаю класс с приставкой --js, так легко можно отделить классы стилистики от классов программирования.

Читайте также:  Ленивая загрузка изображений

Html-код вставляется метом insertAdjacentHTML, который принимает два обязательных параметра — первое, строка, которая указывает на место вставки, второе — строка с html-кодом объекта. Функция getHtml возвращает строку с html кодом.

function getHtml () {
  return `
  <div class="cookies-alert cookies-alert--js">
      <div class="cookies-alert__container">
          <div class="cookies-alert__left">
              <p>Для корректной работы сайта мы используем файлы Cookie. Это позволяет нам запомнить ваши настройки и предпочтения. <br />Для дальнейшего использования сайта вы должны принять согласие на использование файлов Cookie.</p>
          </div>
          <div class="cookies-alert__right">
            <a class="text-secondary" href="https://ru.wikipedia.org/wiki/Cookie" target="_blank" rel="nofollow">Подробнее</a>
            <button class="btn btn__primary cookies-alert__btn cookies-alert__btn--js">Ok. Согласен!</button>              
          </div>
      </div>
  </div>
  `
}

И так, объект окна мы добавили в DOM, но оно по умолчанию скрыто. Для показа добавим с определенной задержкой (1 сек.) класс is-show, чтобы сработала анимация. Стили я тут приводить не буду, можете подсмотреть в исходники файла scss на Github.

// Add class in cookies-alert block
setTimeout(() => {
  cookiesAlert.classList.add('is-show')
}, 1000)

Блок у нас появился. Отлично! Теперь обработаем клик по кнопки согласия с условиями сайта. По клику нам необходимо выполнить две задачи: 1. Скрыть окошко, удалив класс is-show; 2. установить куку с определенным временем жизни.

const expires = new Date(new Date().getTime() + 2 * 60 * 1000) // Устанавливаем время жизни Cookies - в данном случае 2 мин.
// Click on btn and set cookies
cookiesBtn.addEventListener('click', setCookies)

function setCookies() {
  cookiesAlert.classList.remove('is-show')
  setTimeout(() => {
    cookiesAlert.remove()
  }, 1000)

  Cookies.set(COOKIES_NAME, true, {
    expires
})

Если вы обратили внимание, после того, как мы удалили класс is-show далее с задержкой в 1 сек. удаляется и сам блок окна. По сути нам оно уже не нужно. То есть мы проинформировали пользователя, он согласился и все, задача выполнена. Не вижу смысла оставлять в DOM ненужный объект.

Установка куки происходит методом Cookies.set(). Здесь мы передаем 3 параметра, два из которых обязательны:

  • Название куки (обязательно)
  • Значение куки (обязательно)
  • Объект с доп. опциями

В качестве значения куки передаем булево true. В качестве доп. опций у нас выступает время жизни — expires. Если не передать время жизни expires, то умолчанию куки будут установлены до тех пока мы не перезапустим браузер. В данном случае нас так не устраивает и мы устанавливаем определенный период. Для демонстрации я выставил 2 мин. Заметьте я тут использовал встроенный в JS класс Date, чтобы использовать именно минуты. А вообще по умолчанию параметр expires принимает число в днях. Более подробнее можете почитать в документации плагина js-cookies.

// Пример, время жизни 2 дня
Cookies.set(COOKIES_NAME, true, {
    expires: 2
}

Теперь давайте посмотрим на полный код данного окошка.

import Cookies from 'js-cookie'
import './style.scss'

/**
 * Lib: Cookies js
 * https://github.com/js-cookie/js-cookie
 */

function getHtml () {
  return `
  <div class="cookies-alert cookies-alert--js">
      <div class="cookies-alert__container">
          <div class="cookies-alert__left">
              <p>Для корректной работы сайта мы используем файлы Cookie. Это позволяет нам запомнить ваши настройки и предпочтения. <br />Для дальнейшего использавания сайта вы должны принять согласие на использование файлов Cookie.</p>
          </div>
          <div class="cookies-alert__right">
            <a class="text-secondary" href="https://ru.wikipedia.org/wiki/Cookie" target="_blank" rel="nofollow">Подробнее</a>
            <button class="btn btn__primary cookies-alert__btn cookies-alert__btn--js">Ok. Согласен!</button>              
          </div>
      </div>
  </div>
  `
}

document.addEventListener('DOMContentLoaded', cookieNotify)

const COOKIES_NAME = 'visit'
const expires = new Date(new Date().getTime() + 2 * 60 * 1000) // Устанавиливаем время жизни Cookies - в данном случае время жизни 2 мин.

function cookieNotify() {
  if (!Cookies.get(COOKIES_NAME)) {
    document.querySelector('body').insertAdjacentHTML('beforeend', getHtml())
    const cookiesAlert = document.querySelector('.cookies-alert--js')
    const cookiesBtn = document.querySelector('.cookies-alert__btn--js')

    // Add class in cookies-alert block
    setTimeout(() => {
      cookiesAlert.classList.add('is-show')
    }, 1000)

  // Click on btn and set cookies
  cookiesBtn.addEventListener('click', setCookies)

  function setCookies() {
    cookiesAlert.classList.remove('is-show')
    setTimeout(() => {
      cookiesAlert.remove()
    }, 1000)

    Cookies.set(COOKIES_NAME, true, {
      expires
    })
    }
  }
}

Я обернул весь код в функцию cookieNotify, и вызываю ее, когда DOM дерево загружено и готово.

document.addEventListener('DOMContentLoaded', cookieNotify)
function cookieNotify () { ... }

Теперь можно протестировать. Когда в первый раз откроем страничку нам должно показаться данное окошко. Жмем по кнопочке «Ok. Согласен!», окошко должно скрыться и удалиться из DOM через 1 сек.

Хранилище Cookies

Теперь мы можем заглянуть в браузер, а конкретно в хранилище куки и посмотреть все ли правильно там установилось. Для веб-разработки я использую браузер Mozilla Firefox Developer Edition. Вы можете воспользоваться Chrome браузером или другим.

Читайте также:  Создаем всплывающие окна для сайта - Magnific Popup

Открываем консоль разработчика, переходим во вкладку Хранилище (Storage), далее Куки (Cookies) и видим, что для нашего домена установлена кука с названием visit и значением true. Также обратите внимание на срок действия — указана конкретная дата с временем.

Хранилище Cookies в браузере Firefox

Чтобы проверить работоспособность окошка заново достаточно удалить нужную куку, в данном случае — visit. Кликаем правой кнопкой мыши и удаляем либо все, либо то, что нужно.

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

На этом все. Всем удачи. До встречи в других моих постах!

Остались вопросы? Посмотрите видео...

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (7 оценок, среднее: 3,43 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории
Индикатор загрузки страницы - preloader