Панель уведомления о файлах cookiesСейчас в России и ЕС необходимо предупреждать пользователей сайта об использовании сайтом файлов cookies. то есть предупреждать о том, что сайт собирает информацию. какую и зачем. юридически необходимо для устранения проблем в будущем.
Согласно требованиям GDPR и российского закона №152-ФЗ, сайты обязаны информировать пользователей о сборе данных через cookie.
сайт автора:
https://web-revenue.ru/verstka/realizatsiya-uvedomleniya-o-cookieЗдесь это тоже установлено, как вы, наверное, видели. Скрипт запоминает то, что вы прочитали (кликнув на "понятно") и записывает в браузере ваш выбор. в течении 3 месяцев этот скрипт выводиться не будет. потом опять появится.
Вложение:
cookies_site.png [ 138.72 КБ | Просмотров: 535 ]
cookies_site.png
Делается очень просто:
код вывода сообщения:
Код: Выделить всё
<div id="cookie_note">
<p>Продолжая пользоваться сайтом, вы соглашаетесь на обработку файлов cookie и других пользовательских данных в соответствии с <a href="/policy.html" target="_blank">политикой конфиденциальности</a>. Заблокировать использование cookies сайтом можно в настройках браузера.</p>
<button class="button cookie_accept btn btn-primary btn-sm">Понятно</button>
</div>
css оформление:
Код: Выделить всё
#cookie_note {
display: none;
position: fixed;
z-index: 100;
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_note .btn-sm {
display: block;
margin: 0 auto;
}
.cookie_accept {
width: 20%;
}
#cookie_note.show {
display: flex;
}java-script обработки:
Код: Выделить всё
<script>
// Установка cookie с возможностью указания срока
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=/";
}
// Получение значения cookie по имени
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
// Основная функция проверки наличия cookie
function checkCookies() {
const cookieNote = document.getElementById('cookie_note');
const cookieBtnAccept = cookieNote?.querySelector('.cookie_accept');
// Проверка наличия cookie
if (!getCookie('cookies_policy') && cookieNote && cookieBtnAccept) {
cookieNote.classList.add('show');
// Обработчик клика на кнопку согласия
cookieBtnAccept.addEventListener('click', function () {
setCookie('cookies_policy', 'true', 90); // Срок хранения 3 месяца (90 дней)
cookieNote.classList.remove('show');
});
}
}
// Инициализация
document.addEventListener('DOMContentLoaded', checkCookies);
</script>
