Сообщение о файлах cookie
Обновлено: 03.05.2024
Привет всем, у кого есть свой сайт. Вы, скорее всего, знаете, что если у вас есть сайт, то он постоянно требует каких-то доработок и улучшений. То закон какой-то новый выйдет, то в SEO что-то изменится и так далее. Сегодня я покажу вам простой способ, как можно добавить на сайт предупреждение об использовании cookie без использования плагинов.
Конечно же, если у вас сайт на какой-то популярной платформе типа WordPress, то для предупреждения об использовании cookie можно установить любой из огромного количества плагинов, которые сделают всю работу за вас. Однако опытные вебмастера прекрасно знают, что чем больше на сайте плагинов, тем медленнее он работает, а это уже напрямую влияет на SEO. Поэтому если вы хоть немного понимаете код (CSS, JS, HTML), то лучше всего сделать предупреждение об использовании Cookie своими руками.
Все ли сайты используют Cookie
Этим вопросом задаются многие владельцы сайтов. Ответ очень простой – почти со 100% вероятностью ДА. Исключением могут быть только сайты, на которых нет вообще ничего, кроме текстового контента: ни счетчиков посещаемости, ни рекламы, ни форм обратной связи и так далее. В общем, если у вас хоть сколько-нибудь нормальное подобие современного сайта, то предупредить об использовании Cookie вы просто обязаны.
Почему я использовал Local Storage при написании предупреждения
Честно вам скажу, перед тем, как сделать такое предупреждение на своем сайте, я просмотрел несколько похожих статей с готовыми решениями. Но они мне не понравились. Объясняю чем. Во всех решениях были использованы cookie для работы этого функционала. Оно и не сильно странно, и даже логично. Но сейчас есть решение гораздо более удобное и простое – локальное хранилище браузера (local storage).
Работа локального хранилища очень похожа на работу cookie, но есть существенные отличия.
- Каждый раз, когда что-то записывается в cookie (или стирается оттуда), то эта информация отправляется на сервер. А это дополнительная нагрузка на сервер. А если вы обрабатываете cookie сервером, а не клиентской частью, то это еще и дополнительные задержки времени. Local Storage же в отличие от Cookie никуда дальше браузера пользователя не уходит и хранится только там.
- С локальным хранилищем удобнее работать, так как это самый обыкновенный объект. Cookie же представляют собой строку, которую постоянно приходится распарсивать, использовать регулярки или подключать дополнительный библиотеки для удобной работы с Cookie. А дополнительные библиотеки опять же негативно влияют на скорость работы вашего сайта.
Вот и во всех примерах, которые я находил в интернете для работы с cookie используют библиотеку jQuery да еще и с дополнительной мини библиотекой, которая позволят jQuery удобнее работать с кукисами. Есть примеры кода и на чистом Java Script, но они, как правило, очень громоздкие и неудобные.
Как я сделал предупреждение об использовании cookie на сайте без плагина
Код будет состоять из трех частей. Первый кусок – html разметка. Его нужно поместить куда-то в футер вашего сайта (в самый низ). Если у вас сайт на CMS, то ищите у него в корне шаблона файл footer.php. Если у вас какой-то простенький одностраничный сайт, то в самом низу найдите тег . Внутри него обязательно будет еще какой-то код. Нет большой разницы, куда именно вы поместите наш код, но я бы советовал в самом конце этого тега, как раз перед .
Третья часть – JS (Java Script) – самое вкусное во всем это творении. Как раз тут я использовал локальное хранилище браузера – быстрое, удобное, доступное. Код со скриптами вам нужно добавить в основной скриптовый файл (если у вас их несколько), который срабатывает абсолютно на всех страницах сайта.
Когда вы все закончите, то вот, как у вас будет это выглядеть:
Сразу после использования кода
Cookie предупреждение в контексте сайта и с кнопкой стилизованной под общий стиль сайта
Как работает предупреждение об использование Cookie, которое я сделал
Да, для большинства из вас этот пункт, наверное, будет неинтересен. Вы просто вставите код, все заработает, и вы мысленно скажете мне спасибо. Но для тех из вас, кому интересно разобраться подробнее, я объясню некоторые ключевые моменты скрипта.
UNIX время — это количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года (источник — википедия)
Также мы показываем это предупреждение в случае, если указанного ключа вообще не было в локальном хранилище. Это означает, что человек на нашем сайте впервые.
В противном случае мы ничего не делаем, и пользователь просто не видит предупреждение, потому что по умолчанию оно у нас скрыто, насколько вы помните.
Вывод
Надеюсь, я смог помочь решить вашу проблему, и теперь вы знаете, как сделать на своем сайте предупреждение об использовании Cookie. Если у вас остались какие-то вопросы по поводу использования этого кода, то смело задавайте их в комментариях.
Кстати, если вы знаете, почему традиционно предупреждение о Cookie пишут с использованием самих же Cookie, а не Local Storage, сообщите мне, пожалуйста, об этом. Вдруг я делаю что-то не так. Хотя чисто технически код выполняет именно то, чего от него ждут.
Всем спасибо за внимание.
А также мы будем рады услышать ваши пожелания, если вам по какой-то причине неудобно пользоваться сайтом.
Не будьте равнодушными к проекту. Спасибо! :-)
Нам очень приятно! Не могли бы вы поделиться этой статьей с друзьями? А также мы будем рады, если вы оставите комментарий.
Добавить комментарий Отменить ответ
Здравствуйте!
Спасибо за интересные мысли и идею. Для меня — чем проще код, тем лучше.
Мне кажется, что в коде ошибка и указанное в Java Scriptе UNIX время 31536000000 секунд на 3 порядка больше 1 года, т.е. эта цифра соответсвует 1000 годам и это предупреждение по второму разу не увидит ни один пользователь сайта 🙂
Если я прав, исправте пожалуйста.
Вы когда-нибудь работали с куки? Казалось ли вам при этом, что их использование организовано просто и понятно? Полагаю, что в работе с куки есть множество нюансов, о которых стоит знать новичкам.
Свойство document.cookie
Взглянем на классический способ работы с куки. Соответствующая спецификация существует, благодаря Netscape, с 1994 года. Компания Netscape реализовала свойство document.cookie в Netscape Navigator в 1996 году. Вот определение куки из тех времён:
Как же это выглядит?
Получение куки
Да, именно так всё и делается. В нашем распоряжении оказывается строка со всеми значениями, хранящимися в куки-файле, разделёнными точкой с запятой.
Как вытащить из этой строки отдельное значение? Если вам кажется, что для этого надо самостоятельно разбить строку на части — знайте, что так оно и есть:
Как узнать о том, когда истекает срок действия какого-нибудь из куки? Да, в общем-то, никак.
А как узнать домен, с которого установлен какой-нибудь куки? Тоже никак.
Установка куки
Вышеприведённая команда позволяет создать куки с именем theme , значением которого является dark . Хорошо. Значит ли это, что document.cookie — это строка. Нет, не значит. Это — сеттер.
Эта команда не перезапишет куки с именем theme . Она создаст новый куки с именем mozilla . Теперь у нас имеются два куки.
По умолчанию срок действия куки, созданного так, как показано выше, истекает после закрытия браузера. Но при создании куки можно указать срок его действия:
Да. Это — как раз то, что мне нужно — подбирать дату и время истечения срока действия куки в формате GMT каждый раз, когда нужно установить куки. Ладно, давайте воспользуемся для решения этой задачи JavaScript-кодом:
Но, к счастью, у нас есть и другой способ установки момента истечения срока действия куки:
И не надо забывать о свойствах path и domain . По умолчанию куки устанавливаются для текущего расположения и текущего хоста. Если надо установить куки для всего домена — надо будет добавить к команде установки куки конструкцию такого вида:
Удаление куки
Для удаления куки надо установить дату и время истечения срока действия куки на какой-нибудь момент из прошлого. Для того чтобы всё точно сработало бы — тут рекомендуется использовать начало эпохи Unix.
Работа с куки в сервис-воркерах
Это просто невозможно. Дело в том, что работа с document.cookie — это синхронная операция, в результате воспользоваться ей в сервис-воркере нельзя.
Cookie Store API
Существует черновик стандарта одного замечательного API, направленного на работу с куки, который способен значительно облегчить нам жизнь в будущем.
Во-первых — это асинхронный API, а значит — пользоваться им можно, не блокируя главный поток. Применять его можно и в сервис-воркерах.
Во-вторых — этот API устроен гораздо понятнее, чем существующий механизм работы с куки.
▍Получение куки
Метод getAll возвращает массив, а не строку. Именно этого я и жду, когда пытаюсь получить некий список.
А вот — приятная неожиданность. Можно узнать и дату истечения срока действия куки, и сведения о домене и пути, и при этом не пользоваться никакими хаками.
▍Установка куки
Мне очень нравится этот синтаксис!
▍Удаление куки
Или можно, как раньше, установить дату истечения срока действия куки на некий момент в прошлом, но не вижу причины поступать именно так.
▍События куки
Как видите, теперь у нас есть возможность подписываться на изменения куки, не занимаясь опросом document.cookie , блокирующим главный поток. Фантастика!
▍Сервис-воркеры
Можно ли пользоваться этим API прямо сейчас?
Хотя этим API уже можно пользоваться, но тут надо проявлять осторожность. Cookie Store API работоспособно в Chrome 87+ (Edge 87+, Opera 73+). В других браузерах можно воспользоваться полифиллом, который, правда, не возвращает полной информации о куки, как это сделано в настоящем API. Прогрессивные улучшения — это вещь.
Самые распространенные мифы относительно куки:
Для чего нужны куки?
То есть сегодня множество сайтов не смогут нормально работать без куки. В лучшем случае они смогут открываться, но потеряют большую часть своих возможностей.
Что такое сторонние и постоянные куки?
Например, вы в течение месяца ежедневно посещали личный аккаунт во Вконтакте через браузер Хром. В файле кукис сохранились регистрационные данные, настройки. Потом вы 1-2 месяца не посещали соцсеть. Зайдя снова после длительного периода бездействия, сервис попросит вас авторизоваться, так как сохраненные куки уже автоматически очистились.
Где хранятся куки?
Internet Explorer 11
Как очистить, запретить или блокировать куки в браузерах?
Рассмотрим пошагово, как очистить историю посещений и сохраненную информация в популярных браузерах.
Google Chrome и Яндекс Браузер (алгоритм идентичен для двух программ)
Можно также активировать опцию блокировки сторонних куки или задать отдельные сайты, с которых не будут собираться данные.
- Открываем браузер.
- Нажимаем комбинацию клавиш Ctrl+Shift+Delete.
- В окне выбираем период, отмечаем нужный чек-бокс и нажимает стереть историю.
- Всё.
Резюме
Мы подробно изучили, что такое куки. Узнали, зачем нужны эти текстовые файлы, где они хранятся на компьютере. Также мы рассмотрели способы очистки сохраненных данных в пяти популярных браузерах. Научились блокировать сбор информации о посещениях сайтов пользователями.
В любом случае, куки – это полезные текстовые данные, с помощью которых ускоряется загрузка страниц и повышается комфорт серфинга в Интернете.
Читайте также: