Приветствую вас в данной статье. Речь пойдет об файлах 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 браузером или другим.
Открываем консоль разработчика, переходим во вкладку Хранилище (Storage), далее Куки (Cookies) и видим, что для нашего домена установлена кука с названием visit и значением true. Также обратите внимание на срок действия — указана конкретная дата с временем.
Чтобы проверить работоспособность окошка заново достаточно удалить нужную куку, в данном случае — visit. Кликаем правой кнопкой мыши и удаляем либо все, либо то, что нужно.
Напоследок хочу сказать, что если из данной статьи вам что-то непонятно, то вы можете посмотреть видео ниже, в котором я подробно изложил весь процесс шаг за шагом. Ну и конечно, можете завать вопросы в комментариях.
На этом все. Всем удачи. До встречи в других моих постах!
(7 оценок, среднее: 3,43 из 5)
Загрузка...