мы используем файлы cookie скрипт
Работа с cookie в JavaScript
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя.
Для хранимых данных существуют несколько ограничений:
Проверка включены ли cookies в браузере
Чтобы узнать, включены ли cookies в браузере пользователя до их использования, можно проверить свойство navigator.cookieEnabled (содержит true или false ).
В старых браузерах navigator.cookieEnabled может быть неопределенным.
Запись cookies
Запись в document.cookie происходит особым образом, например следующий пример обновит только данные с ключом «name», но при этом не затронет все остальные.
Такая установка будет хранится до закрытия браузера. Чтобы продлить время жизни cookies есть два типа параметров:
Max-age и Expires
max-age устанавливает время жизни куки в секундах, а параметр expires задает непосредственно дату окончания в формате RFC-822 или RFC-1123 ( Mon, 03 Jul 2021 10:00:00 GMT ).
Следующие примеры устанавливают куки name=user сроком на один месяц:
Куки сроком на год:
Параметр указывает URL-префикс пути т.е. на каких страницах будут доступны установленные куки. Значение path должно быть относительным URL (без домена).
Например, установка кук для страницы http://example.com/admin/ и всех её дочерних:
Domain
Параметр указывает домен, на котором будут доступны куки, включая поддомены.
Secure
Параметр позволяет делать установку куки только на страницах с HTTPS-протоколом. С этой настройкой, установленные куки не будут доступны на том же сайте с протоколом HTTP.
Чтение cookies
Чтение кук не совсем удобное, в JS нет нативного метода, который получит значение по ключу. Объект document.cookie возвращает все установленные значения в виде строки, например:
Чтобы получить значение по ключу можно использовать регулярное выражение:
Функция для получения значения cookie по ключу:
Получить все значения cookies в виде объекта:
Как предупредить о файлах куки на сайте
В наши дни почти каждый сайт собирает куки-файлы. При этом далеко не все ресурсы предупреждают пользователей о том, как собирают и обрабатывают их персональные данные. Не настроив такое уведомление на своём сайте, компания рискует получить штраф.
В этой статье рассказываем, как соблюсти все юридические тонкости и при этом написать простое и понятное сообщение.
Как понять, собирает ли ваш сайт куки
Если вы следите за эффективностью своего сайта с помощью Google Analytics и Яндекс.Метрики — вы точно собираете куки-файлы. И если ваш сайт подключен к CRM — вы тоже их собираете. Исключение составляют только статичные сайты.
Чтобы наверняка убедиться, собираете вы куки или нет, откройте в вашем браузере панель разработчика и перейдите на вкладку Storage — там хранятся куки. Откройте блок с надписью Cookies. Если в нём есть данные — значит, ваш сайт собирает куки, и вам нужно настроить виджет с сообщением об этом.
В Mozilla Firefox
Меню → Web Developer → Storage Inspector (или Shift + F9)
В Google Chrome
F12 или (Ctrl + Shift + I) → Application → Storage
В Safari
1. Перейдите в раздел Advanced
2. Поставьте галочку напротив опции «Show Developer menu»
3. Нажмите Cmd + option + U
Что вам грозит за сбор куки без формы
В России отношения, связанные с обработкой персональных данных, контролирует 152-ФЗ. Согласно его положениям, получать согласие пользователей на сбор куки должен каждый оператор персональных данных — а это любая организация, в которой официально трудоустроен хотя бы один сотрудник. Дело в том, что, оформляя трудовой договор, работодатель вписывает туда ФИО и паспортные данные сотрудника — а это уже сбор и обработка персональных данных. Все сайты, собирающие телефоны, емейлы, имена и куки пользователей, автоматически попадают под действие этого закона.
За сбор персональных данных без уведомлений пользователей суд может назначить штраф до 75 тысяч рублей, а в отдельных случаях даже заблокировать ресурс.
В Европе действует регламент GDPR — General Data Protection Regulation. Если на ваш ресурс зашёл хотя бы один житель Евросоюза и вы собрали его персональные данные — на вас распространяется действие регламента. За нарушение его требований компании грозит штраф до 20 миллионов евро или 4% от годового оборота компании.
Подробнее о возможных санкциях вы можете прочитать в нашей статье, как избежать штрафов за куки и политику конфиденциальности. Краткий пересказ: настройте виджет о сборе данных — и будет вам счастье.
Можно ли писать сообщение «человеческим» языком, а не в юридических терминах?
Для обработки куки-файлов применяются те же правила, что и для обработки персональных данных. А значит, вы должны получить конкретное, информированное и сознательное согласие пользователя. Уведомление в стиле «продолжая пользоваться сайтом, вы даёте согласие на сбор персональных данных» с крестиком для закрытия формы суд таковым не признаёт. Ведь пользователь всегда может сказать, что не обязан читать никаких ваших всплывающих окошек.
Чтобы обезопасить себя юридически, мы рекомендуем использовать на виджете такие элементы:
Пример:
А как у Лебедева можно?
В интернете можно найти примеры нестандартных, необычно оформленных сообщений о сборе куки. Одно из самых известных принадлежит Студии Артемия Лебедева:
Теоретически, юристы Студии могут сказать, что пользователя предупредили об обработке персональных данных, а значит, продолжая пользоваться сайтом, он даёт своё согласие. Однако реакция суда в таких ситуациях неоднозначна. И мы не рекомендуем ограничиваться фразой «используем куки» — так как большинству людей она ни о чём не говорит.
Ещё один пример неоднозначного сообщения о сборе куки:
Мы не призываем вас писать скучные однообразные сообщения. Однако рекомендуем добавлять к вашим виджетам ссылку на политику конфиденциальности или кнопку, которая более однозначно выражает согласие пользователя на сбор куки.
Как соблюсти грань между стилем и юридической точностью
В этих примерах операторам персональных данных удалось составить необычные и привлекающие внимание сообщения о сборе куки и при этом соблюсти юридические тонкости. Надеемся, наша подборка вдохновит на создание своего необычного и запоминающегося виджета.
То, что вы пользуетесь нашим веб-сайтом, говорит нам, что вы счастливы получить все наши куки. Однако вы можете изменить настройки куки в любое время. Узнать больше.
К сожалению, это специальные куки, которыми может питаться только компьютер. Пожалуйста, посмотрите нашу политику куки, чтобы узнать, как мы их используем. Пока вы продолжаете пользоваться нашим сайтом, мы будем собирать их, если вы согласны на использование куки.
Этот веб-сайт использует куки, чтобы улучшить ваш пользовательский опыт. Посмотрите нашу Политику конфиденциальности, чтобы узнать больше.
Наш сайт использует куки (печеньки)
А ещё мы их делаем.
Нажимая на эту кнопку, вы соглашаетесь с нашей политикой конфиденциальности. Посмотреть условия.
Сайт о сельском хозяйстве pioneer.com использует двойную форму подтверждения сбора куки. В первом окне пользователю рассказывают о сборе куки и просят дать согласие, во втором — объясняют, зачем собирать куки и как их используют.
На наш взгляд, текст сообщения можно было бы сделать чуть короче и удобнее для пользователя, но сама идея рассказывать о причинах сбора куки интересна. Большинство пользователей не знает, для чего это нужно, и честное объяснение служит дополнительным убеждающим фактором, чтобы согласиться на сбор данных.
Как сделать предупреждение об использовании cookie на сайте без плагина (используя локальное хранилище)
Привет всем, у кого есть свой сайт. Вы, скорее всего, знаете, что если у вас есть сайт, то он постоянно требует каких-то доработок и улучшений. То закон какой-то новый выйдет, то в SEO что-то изменится и так далее. Сегодня я покажу вам простой способ, как можно добавить на сайт предупреждение об использовании cookie без использования плагинов.
Конечно же, если у вас сайт на какой-то популярной платформе типа WordPress, то для предупреждения об использовании cookie можно установить любой из огромного количества плагинов, которые сделают всю работу за вас. Однако опытные вебмастера прекрасно знают, что чем больше на сайте плагинов, тем медленнее он работает, а это уже напрямую влияет на SEO. Поэтому если вы хоть немного понимаете код (CSS, JS, HTML), то лучше всего сделать предупреждение об использовании Cookie своими руками.
Все ли сайты используют Cookie
Этим вопросом задаются многие владельцы сайтов. Ответ очень простой – почти со 100% вероятностью ДА. Исключением могут быть только сайты, на которых нет вообще ничего, кроме текстового контента: ни счетчиков посещаемости, ни рекламы, ни форм обратной связи и так далее. В общем, если у вас хоть сколько-нибудь нормальное подобие современного сайта, то предупредить об использовании Cookie вы просто обязаны.
Почему я использовал Local Storage при написании предупреждения
Честно вам скажу, перед тем, как сделать такое предупреждение на своем сайте, я просмотрел несколько похожих статей с готовыми решениями. Но они мне не понравились. Объясняю чем. Во всех решениях были использованы cookie для работы этого функционала. Оно и не сильно странно, и даже логично. Но сейчас есть решение гораздо более удобное и простое – локальное хранилище браузера (local storage).
Работа локального хранилища очень похожа на работу cookie, но есть существенные отличия.
Вот и во всех примерах, которые я находил в интернете для работы с cookie используют библиотеку jQuery да еще и с дополнительной мини библиотекой, которая позволят jQuery удобнее работать с кукисами. Есть примеры кода и на чистом Java Script, но они, как правило, очень громоздкие и неудобные.
Как я сделал предупреждение об использовании cookie на сайте без плагина
Второй кусок – стили (CSS). Тут все просто. Вам нужно найти файл style.css или main.css и закинуть этот код в самый конец. Теперь ваше «предупреждение» должно выглядеть красиво и стильно, но… но на самом деле вы его не увидите вообще, пока не добавить код Java Script. Кстати стили я написал сразу адаптивными, чтобы ваше предупреждение об использовании Cookie выглядело ровно и адекватно не только на компьютерах, но также и на мобильных устройствах.
Третья часть – JS (Java Script) – самое вкусное во всем это творении. Как раз тут я использовал локальное хранилище браузера – быстрое, удобное, доступное. Код со скриптами вам нужно добавить в основной скриптовый файл (если у вас их несколько), который срабатывает абсолютно на всех страницах сайта.
Когда вы все закончите, то вот, как у вас будет это выглядеть:
Сразу после использования кода
Cookie предупреждение в контексте сайта и с кнопкой стилизованной под общий стиль сайта
Как работает предупреждение об использование Cookie, которое я сделал
Да, для большинства из вас этот пункт, наверное, будет неинтересен. Вы просто вставите код, все заработает, и вы мысленно скажете мне спасибо. Но для тех из вас, кому интересно разобраться подробнее, я объясню некоторые ключевые моменты скрипта.
При каждой загрузке страницы выполняется коротенькая функция, которая проверяет объект Local Storage по ключу «cookieDate». Значение этого ключа по моей задумке будет какая-то дата в системе UNIX (точнее дата соглашения отдельного пользователя с тем, что ваш сайт использует cookie).
UNIX время — это количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года (источник — википедия)
Если прошло уже больше года с момента, когда мы показывали пользователю предупреждение, то есть если дата была получена по ключу и она на год (точнее, на 31536000000 секунд) меньше текущей даты — мы показываем предупреждение, добавив ему класс «.show».
Также мы показываем это предупреждение в случае, если указанного ключа вообще не было в локальном хранилище. Это означает, что человек на нашем сайте впервые.
В противном случае мы ничего не делаем, и пользователь просто не видит предупреждение, потому что по умолчанию оно у нас скрыто, насколько вы помните.
Вывод
Надеюсь, я смог помочь решить вашу проблему, и теперь вы знаете, как сделать на своем сайте предупреждение об использовании Cookie. Если у вас остались какие-то вопросы по поводу использования этого кода, то смело задавайте их в комментариях.
Кстати, если вы знаете, почему традиционно предупреждение о Cookie пишут с использованием самих же Cookie, а не Local Storage, сообщите мне, пожалуйста, об этом. Вдруг я делаю что-то не так. Хотя чисто технически код выполняет именно то, чего от него ждут.
Уведомление о КУКИ на сайте
Приветствую вас в данной статье. Речь пойдет об файлах 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 в моем проекте. В данном файле хранится код, который собственно и показывает окошко при посещении сайта.
Показывать информер мы будет при условии, что нет установленной куки, поэтому начинаем с условия:
Html-код вставляется метом insertAdjacentHTML, который принимает два обязательных параметра — первое, строка, которая указывает на место вставки, второе — строка с html-кодом объекта. Функция getHtml возвращает строку с html кодом.
Блок у нас появился. Отлично! Теперь обработаем клик по кнопки согласия с условиями сайта. По клику нам необходимо выполнить две задачи: 1. Скрыть окошко, удалив класс is-show ; 2. установить куку с определенным временем жизни.
Если вы обратили внимание, после того, как мы удалили класс is-show далее с задержкой в 1 сек. удаляется и сам блок окна. По сути нам оно уже не нужно. То есть мы проинформировали пользователя, он согласился и все, задача выполнена. Не вижу смысла оставлять в DOM ненужный объект.
Теперь давайте посмотрим на полный код данного окошка.
Теперь можно протестировать. Когда в первый раз откроем страничку нам должно показаться данное окошко. Жмем по кнопочке «Ok. Согласен!», окошко должно скрыться и удалиться из DOM через 1 сек.
Хранилище Cookies
Теперь мы можем заглянуть в браузер, а конкретно в хранилище куки и посмотреть все ли правильно там установилось. Для веб-разработки я использую браузер Mozilla Firefox Developer Edition. Вы можете воспользоваться Chrome браузером или другим.
Хранилище Cookies в браузере Firefox
Чтобы проверить работоспособность окошка заново достаточно удалить нужную куку, в данном случае — visit. Кликаем правой кнопкой мыши и удаляем либо все, либо то, что нужно.
Напоследок хочу сказать, что если из данной статьи вам что-то непонятно, то вы можете посмотреть видео ниже, в котором я подробно изложил весь процесс шаг за шагом. Ну и конечно, можете завать вопросы в комментариях.
На этом все. Всем удачи. До встречи в других моих постах!
Остались вопросы? Посмотрите видео.
JavaScript и куки (cookie)
JavaScript дает возможность устанавливать и читать куки в браузере. В данном уроке мы рассмотрим как происходит работа с куками, а также сделаем простую страницу, которая будет помнить введеное имя и отображать его при каждом входе.
Что такое куки (cookie)?
Обычно куки используются веб сервером для выполнения таких функций как отслеживание посещений сайта, регистрации на сайте и сохранения сведений о заказах или покупках. Однако нам не нужно придумывать программу для вэб сервера чтобы использовать куки. Мы можем использовать их с помощью JavaScript.
В JavaScript куки доступны с помощью свойства cookie объекта document. Создать куки можно следующим образом:
. и получить весь сохраненый набор куков так:
Давайте рассмотрим сохранение и получение куков более подробно.
Сохранение куки
Для сохранения куки нужно присвоить document.cookie текстовую строку, которая содержит свойства куки, которые мы хотим создать:
Свойства описаны в таблице:
Давайте посмотрим пример установки куки:
Перекодирование значения куки!
Функция для установки куки
Функция получает данные для куки в качестве аргументов, затем строит соответствующую строку и устанавливает куки.
Например, установка куки без срока хранения:
Установка куки со сроком хранения до 15 февраля 2011:
Функция для удаления куки.
Другая полезная функция для работы с куки представлена ниже. Функция «удаляет» куки из браузера посредством установки срока хранения на одну секунду раньше текущего значения времени.
Для использования данной функции нужно только передать ей имя удаляемого куки:
Получение значения куки
Для того, чтобы получить значение предварительно установленного куки для текущего документа, нужно использовать свойство document.cookie :
Таким образом возвращается строка, которая состоит из списка пар имя/значение, разделенных точкой с запятой для всех куки, которые действуют для текущего документа. Например:
Функция для получения значения куки
Данная функция использует регулярное выражение для поиска имени куки, которое представляет интерес, а затем возвращает значение, которое обработано функцией unescape() для перекодирования к нормальному символьному виду. (Если куки не найдено, возвращается значение null.)
Данная функция проста в использовании. Например, для возврата значения куки username :
Простой пример использования
В данном примере мы сделали страницу, которая запрашивает Ваше имя при первом посещении, затем она сохраняет Ваше имя в куки и показывает его при следующих посещениях.
Откройте страницу в новом окне. При первом посещении она попросит ввести имя и сохранит его в куки. Если Вы посетите страницу еще раз, она отобразит на экране введенное имя из куки.
Для куки задаем срок хранения в 1 год от текущей даты, это означает, что браузер сохранит Ваше имя даже если Вы закроете его.
Вы можете удалить куки нажав на ссылку Забудь обо мне!, которая вызывает функцию delete_cookie() и обновляет страницу, чтобы снова запросить имя у Вас.
Вы можете посмотреть код страницы в браузере, выбрав функцию просмотра исходного кода. Здесь приводится основная часть кода:
Данный урок показал Вам, как использовать куки в JavaScript для хранения информации о Ваших посетителях. Спасибо за внимание! 🙂
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com
Перевел: Сергей Фастунов
Урок создан: 15 Июня 2010
Просмотров: 240675
Правила перепечатки
5 последних уроков рубрики «Разное»
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Разработка веб-сайтов с помощью онлайн платформы Wrike
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.