Шпаргалка для WEB мастера: Уведомление о COOKIES - скрипт
Простой скрипт с уведомлением. Сделано на простом Js, не нужно подключать никаких библиотек. По умолчанию скрыт на мобильных чз CSS.
Вот это вставлять в HTML
<!-- START Cookie-Alert -->
<div id="cookie_note">
<p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями
использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности, сборе персональных данных и об использовании
файлов cookie, <a href="/policy.html" target="_blank">нажмите здесь</a>.</p>
<button class="button cookie_accept btn btn-primary btn-sm">Я согласен</button>
</div>
<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>
<!-- END Cookie-Alert -->
Вот это в 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%;}
@media (min-width: 576px){#cookie_note.show{display: flex;}}
@media (max-width: 575px){#cookie_note.show{display: none;text-align: left;}}
Оригинал: https://tretyakov.net/post/preduprezhdenie-o-cookie-dlya-sajta-na-javascript/
Демо:
Под номером 2
Больше материалов а моем Телеграме :
2 комментария