Работа с cookie с помощью Jquery.

Когда я изучал PHP мне часто требовалось использовать cookie и сессии, чтобы запоминать промежуточные вычисления введенные пользователем. Когда узнал, что в jQuery есть специальный плагин, которые позволяет по таким же принципам запоминать значения, то мои срипты стали намного проще.

Библиотека отвечающая за работу с куками называется jquery.cookie.js. Ее вместе с рабочим примером вы можете скачать ниже. Данный плагин требует установки библиотеки jQuery, например, подойдет версия 1.9.1.

Параметры плагина jquery.cookie.js:

Перечисленные выше парматры являются не обязательными для работы с куками. Их можно не устанавливать. Разберем как установить самый простой кук.

Установка cookie на сайте

Для этого пропишите: $.cookie("cookie_name1", "Значение кука1"); Из этого примера мы установим переменной cookie_name1 значение, которое необходимо запомнить. Также, поскольку здесь не указано время хранения, то кук удалится после закрытия браузера.

Пример кука, который действует на всем сайте в течении 5-и дней
$.cookie("cookie_name2", "Значение кука2", {expires: 5, path: "/"});

Пример полного кука, который помимо прочего действует на определенном домене и передает данные только через https:
$.cookie("cookie_name", "Значение кука3", {expires: 5, path: "/", domain: "сайт", secure: true}); });

Получение значения cookie
Получить установленный кук очень просто, рассмотрим пример ниже - с его помощью выведется сообщение установленного значения.
var test = $.cookie("cookie_name1"); alert(test);

Как проверить задан ли cookie на сайте
Для этого нужно использовать условие if
if($.cookie("cookie_name1")) alert(test);

Удаление cookie
Данная операция сводится к тому, что значение кука обнуляется.
$.cookie("cookie_name2", null);

Думаю, из этих примеров, очень легко понять, как использовать куки на любом сайте. Где их вообще можно использовать? Например, на формах, которые должны показываться на сайте только при первом его включении или при выводе данных пользователя.

Куки позволяют хранить полезную информацию о пользователе, чтобы предоставлять ему отличный сервис на вашем сайте. С ними можно работать также и в jQuery. В данном уроке мы рассмотрим, как можно использовать jQuery и куки для хранения некоторых установок пользователя, чтобы затем использовать их при отображении специфического контента.

Мы собираемся сделать панель с несколькими метками. Каждый раз когда происходит нажатие на метке, она выделяется цветом и значение, соответствующее метке сохраняется в куки на вашем компьютере с помощью браузера. Затем вы можете использовать две кнопки для вывода текущего значения, хранящегося в куки, или для удаления куки.

Кроме того, обратите внимание на демо страницу во время первой загрузки. Ни одна из меток не выделена. А после того, как вы выберете одну, можно обновить демо страницу, и метка, выделенная вами останется выделенной. Если вы удалите куки, то выделение снимется с метки. А после перезагрузки все метки останутся без выделений. Теперь рассмотрим, как это работает.

Мы собираемся использовать jQuery для управления куками, для чего будет задействован плагин, который предназначен для работы с хранилищем куки. Название у плагина говорит само за себя - Cookie.

Плагин Cookie можно загрузить из раздела проектов сайта плагинов jQuery.

Cookie — простой плагин, только с одной функцией Cookie() . С помощью данной функции происходит сохранение, получение и удаление значений куки на компьютере клиента.

После подключения библиотеки jQuery мы подключаем плагин jquery.cookie.js в наш HTML код. Затем подключаем файл JavaScript, который содержит код работы с куками (можно также включить текст скрипта в HTML код с помощью тега .

Код HTML выглядит очень просто:

• Базовая
• Стандартная
• Расширенная

Мы создаём три метки, пару ссылок и поле для вывода состояния куки. Содержание CSS файла не относится к теме урока и используется только для выделения выбранной метки с помощью класса .selected . Поэтому перейдём сразу к коду JavaScript.

Итак, первое, что нужно сделать, добавить обычный код для выполнения нашего скрипта после того, как документ готов:

JQuery(document).ready(function(){ //Код скрипта размещается здесь)};

Теперь инициализируем пару переменных, которые будут использоваться далее в нашем коде. Это имя куки и опции для функции cookie : время жизни куки и путь, который добавляется к адресу страницы. Возможны также и другие аргументы, но в нашем уроке мы будем использовать только эти два:

Var cookieName = "level"; var cookieOptions = {expires: 7, path: "/"};

Затем нужно проверить наличие значения в нашем куки. Если его нет, то переходим дальше. Но если значение в куки есть, то нужно установить класс .selected для метки, которая имеет ID, сохранённый в куки. Мы используем функцию cookie с единственным параметром, который является именем куки, значение которого нам нужно получить.:

$("#" + $.cookie(cookieName)).addClass("selected");

Теперь мы создаём обработчик события нажатия кнопки мыши. Функция preventDefault() является стандартной процедурой jQuery для предотвращения перехода браузера по ссылке, когда на ней нажимают кнопку мыши. Когда пользователь нажимает кнопку мыши на метке (которая в действительности является ссылкой), мы удаляем класс .selected с метки, которая выделена в текущий момент и устанавливаем его для только что выбранной.

$(".htabs a").click(function(e){e.preventDefault(); $("#" + $.cookie(cookieName)).removeClass("selected");

Пришла пора создать куки и ей назначить значение. Первый аргумент — это имя куки, в нашем примере level , а второй аргумент — это значение, которое будет присвоено куки. Также мы передаём в функцию опции.

Теперь добавим класс .selected к метке:

$("#" + $.cookie(cookieName)).addClass("selected");});

Теперь нужно вывести значение куки. Все что нужно сделать — это вызвать функцию cookie только с одним параметром, который является именем куки, значение которого нам нужно. Когда происходит нажатие на кнопку #showCookie , мы записываем текущее значение куки в поле #verbose .

$("#showCookie").click(function(e){ e.preventDefault(); $("#verbose").val("Cookie value is " + $.cookie(cookieName) + "."); });

Теперь нужно разобраться с удалением куки. Итак, когда пользователь нажимает кнопку #deleteCookie , мы выводим в поле #verbose сообщение о том, что куки удалено. Затем удаляем класс .selected с текущей выделенной метки.

$("#deleteCookie").click(function(e){ e.preventDefault(); $("#verbose").val("Cookie "level" with value \"" + $.cookie(cookieName) + "\" removed."); $("#" + $.cookie(cookieName)).removeClass("selected");

В заключение, мы удаляем куки. Это очень интересный момент. Код выглядит следующим образом:

$.cookie(cookieName, null, {path:"/"});

И все. Рассмотрим третий аргумент функции. Если посмотреть в код плагина jquery.cookie.js , то обнаружится, что при значении второго аргумента null переменной expires в массиве options присваивается значение -1:

If (value === null) { value = ""; options.expires = -1;}

Поэтому, если мы передадим cookieOptions в качестве третьего аргумента, например, так:

$.cookie(cookieName, $(this).attr("id"), cookieOptions);

то работа нашего кода нарушится, так как cookieOptions.expires примет значение -1, что полностью соответствует логике работы плагина.

А если задано негативное значение (т.е. дата в прошлом), куки будет удалено.

Но путь нужно задавать, так как в некоторых случаях плагин не удалял куки без указания пути.

Куки позволяют хранить полезную информацию о пользователе, чтобы предоставлять ему отличный сервис на вашем сайте. С ними можно работать также и в jQuery. В данном уроке мы рассмотрим, как можно использовать jQuery и куки для хранения некоторых установок пользователя, чтобы затем использовать их при отображении специфического контента.

Мы собираемся сделать панель с несколькими метками. Каждый раз когда происходит нажатие на метке, она выделяется цветом и значение, соответствующее метке сохраняется в куки на вашем компьютере с помощью браузера. Затем вы можете использовать две кнопки для вывода текущего значения, хранящегося в куки, или для удаления куки.

Кроме того, обратите внимание на демо страницу во время первой загрузки. Ни одна из меток не выделена. А после того, как вы выберете одну, можно обновить демо страницу, и метка, выделенная вами останется выделенной. Если вы удалите куки, то выделение снимется с метки. А после перезагрузки все метки останутся без выделений. Теперь рассмотрим, как это работает.

Мы собираемся использовать jQuery для управления куками, для чего будет задействован плагин, который предназначен для работы с хранилищем куки. Название у плагина говорит само за себя - Cookie.

Плагин Cookie можно загрузить из раздела проектов сайта плагинов jQuery.

Cookie — простой плагин, только с одной функцией Cookie() . С помощью данной функции происходит сохранение, получение и удаление значений куки на компьютере клиента.

После подключения библиотеки jQuery мы подключаем плагин jquery.cookie.js в наш HTML код. Затем подключаем файл JavaScript, который содержит код работы с куками (можно также включить текст скрипта в HTML код с помощью тега .

Код HTML выглядит очень просто:

• Базовая
• Стандартная
• Расширенная

Мы создаём три метки, пару ссылок и поле для вывода состояния куки. Содержание CSS файла не относится к теме урока и используется только для выделения выбранной метки с помощью класса .selected . Поэтому перейдём сразу к коду JavaScript.

Итак, первое, что нужно сделать, добавить обычный код для выполнения нашего скрипта после того, как документ готов:

JQuery(document).ready(function(){ //Код скрипта размещается здесь)};

Теперь инициализируем пару переменных, которые будут использоваться далее в нашем коде. Это имя куки и опции для функции cookie : время жизни куки и путь, который добавляется к адресу страницы. Возможны также и другие аргументы, но в нашем уроке мы будем использовать только эти два:

Var cookieName = "level"; var cookieOptions = {expires: 7, path: "/"};

Затем нужно проверить наличие значения в нашем куки. Если его нет, то переходим дальше. Но если значение в куки есть, то нужно установить класс .selected для метки, которая имеет ID, сохранённый в куки. Мы используем функцию cookie с единственным параметром, который является именем куки, значение которого нам нужно получить.:

$("#" + $.cookie(cookieName)).addClass("selected");

Теперь мы создаём обработчик события нажатия кнопки мыши. Функция preventDefault() является стандартной процедурой jQuery для предотвращения перехода браузера по ссылке, когда на ней нажимают кнопку мыши. Когда пользователь нажимает кнопку мыши на метке (которая в действительности является ссылкой), мы удаляем класс .selected с метки, которая выделена в текущий момент и устанавливаем его для только что выбранной.

$(".htabs a").click(function(e){e.preventDefault(); $("#" + $.cookie(cookieName)).removeClass("selected");

Пришла пора создать куки и ей назначить значение. Первый аргумент — это имя куки, в нашем примере level , а второй аргумент — это значение, которое будет присвоено куки. Также мы передаём в функцию опции.

Теперь добавим класс .selected к метке:

$("#" + $.cookie(cookieName)).addClass("selected");});

Теперь нужно вывести значение куки. Все что нужно сделать — это вызвать функцию cookie только с одним параметром, который является именем куки, значение которого нам нужно. Когда происходит нажатие на кнопку #showCookie , мы записываем текущее значение куки в поле #verbose .

$("#showCookie").click(function(e){ e.preventDefault(); $("#verbose").val("Cookie value is " + $.cookie(cookieName) + "."); });

Теперь нужно разобраться с удалением куки. Итак, когда пользователь нажимает кнопку #deleteCookie , мы выводим в поле #verbose сообщение о том, что куки удалено. Затем удаляем класс .selected с текущей выделенной метки.

$("#deleteCookie").click(function(e){ e.preventDefault(); $("#verbose").val("Cookie "level" with value \"" + $.cookie(cookieName) + "\" removed."); $("#" + $.cookie(cookieName)).removeClass("selected");

В заключение, мы удаляем куки. Это очень интересный момент. Код выглядит следующим образом:

$.cookie(cookieName, null, {path:"/"});

И все. Рассмотрим третий аргумент функции. Если посмотреть в код плагина jquery.cookie.js , то обнаружится, что при значении второго аргумента null переменной expires в массиве options присваивается значение -1:

If (value === null) { value = ""; options.expires = -1;}

Поэтому, если мы передадим cookieOptions в качестве третьего аргумента, например, так:

$.cookie(cookieName, $(this).attr("id"), cookieOptions);

то работа нашего кода нарушится, так как cookieOptions.expires примет значение -1, что полностью соответствует логике работы плагина.

А если задано негативное значение (т.е. дата в прошлом), куки будет удалено.

Но путь нужно задавать, так как в некоторых случаях плагин не удалял куки без указания пути.

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

HTTP - протокол, не имеющий "памяти", то есть каждый запрос, приходящий к серверу рассматривается как отдельный, никак не связанный с другими запросами. Именно поэтому он не может хранить данные сам по себе. Однако эта простота была также и одной из причин его быстрого и широкого распространения в ранние годы развития сети Интернет.

Есть, однако возможность сохранять информацию между запросами. Делается это с помощью Cookies. С их помощью можно эффективно управлять сессиями и сохранять необходимые данные.

Есть два способа работы с Cookies - на стороне сервера (PHP, ASP и т.д.), и на стороне клиента (браузера) - JavaScript. В данной небольшой статье мы посмотрим, как создаются и читаются данные из Cookies как в PHP, так и с помощью .

Cookies и PHP

Создание cookies

Для создания cookies в PHP нужно воспользоваться функцией setcookie(). Она принимает ряд параметров (все, за исключением первого параметра необязательны, и могут быть опущены):

Setcookie("pageVisits", // Имя cookie, обязательный параметр $visited, // The value of the cookie time()+7*24*60*60, // Время, на которое устанавливается cookie - на неделю вперед "/", //Путь к папке, для которой будет доступен cookie "сайт" //Домен, к которому будет привязан файл cookie);

Если передать значение "0" в качестве параметра для срока истечения действия cookie (это значение по умолчанию), - cookie будет уничтожаться при перезапуске браузера. Параметр "/" означает, что cookie будет доступен для всех подпапок на данном домене (в случае необходимости вы можете "привязать" cookie к какой-то отдельной директории, скажем, передав параметр наподобие "/admin/").

Есть еще два дополнительных параметра для данной функции, которые мы не отметили. Они определяются булевыми значениями. Первый из них определяет, будет ли cookie передаваться только по безопасному протоколу HTTPS, а второй - то, что cookie не будут доступны через JavaScript (введено в PHP 5.2).

Для большинства практических задач вполне хватит первых четырех параметров, остальные же обычно можно опустить.

Считывание (чтение) cookies

Считывание cookie средствами PHP намного проще. Все cookie, преданные скрипту, доступны через суперглобальный массив $_COOKIE. В нашем случае, чтобы считать значение из cookie, мы должны написать следующее:

$visits = (int)$_COOKIE["pageVisits"]+1; echo "Вы посетили этот сайт: ".$visits." times";

Сейчас самое время отметить, что cookies, установленные с помощью функции setcookie() становятся доступны через массив $_COOKIE при следующей загрузке страницы.

Удаление cookies

Для удаления cookies используется та же функция setcookie(), которой в данном случае нужно передать в качестве параметра, определяющего "время жизни" cookie любое время из прошлого.

Setcookie("pageVisits", $visited, time()-7*24*60*60, // Неделя назад. Файл cookie будет удален "/", "сайт");

Cookies и jQuery

Для использования cookies с JQuery вам понадобится специальный плагин cookie .

Создание cookies

Создание cookies с помощью плагина достаточно интуитивно понятное:

$(document).ready(function(){ // Установка cookie kittens, исчезнет после перезапуска браузера: $.cookie("kittens","Seven Kittens"); // Установка demoCookie (как в демо): $.cookie("demoCookie",text,{expires: 7, path: "/", domain: "сайт"}); // "text" - переменная, в которую сохраняется значение cookie });

Считывание (чтение) cookies

Считывание еще проще. Нужно просто вызвать функцию $.cookie() с единственным параметром - именем cookie. При этом будет возвращено значение cookie.

$(document).ready(function(){ // Получаем cookie kittens: var str = $.cookie("kittens"); // str теперь содержит "Seven Kittens" });

Удаление cookies

Для удаления cookie снова используем функцию $.cookie(), но передавая "null" как второй параметр.

$(document).ready(function(){ // Удаляем cookie kittens: var str = $.cookie("kittens",null); // cookie kittens больше не существует });

Резюмируя

В этой небольшой статье мы рассмотрели то, как устанавливать и считывать информацию из cookies. Самое время заметить, что в cookies не следует хранить важную информацию вроде паролей, имен пользователей и т.п., так как они передаются как обычные заголовки при каждой загрузке страницы и могут быть легко считаны злоумышленниками. Однако, с надлежащими предосторожностями при помощи этой несложной технологии можно добиться более высокого уровня интерактивности при взаимодействии с посетителями сайта.

По материалам tutorialzine.com
Перевод - Дмитрий Науменко

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить JavaScript и PHP:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

На днях решил подробно разобраться с куками: как работают, как устроены, как использовать. Для окончательного понимания было принято решение скачать плагин для работы с куками на Jquery. Ссылочка на плагин прилагается Cookie Plugin for jQuery.

Начну пожалуй с теории. Сookie являются составной частью протокола HTTP. От сервера клиенту cookie передаются в заголовке HTTP-ответа сервера. Точнее - в поле Set-Cookie этого заголовка. Поле Set-Cookie может содержать данные нескольких кук. Также в заголовке HTTP-ответа может содержаться несколько полей Set-Cookie. Формат поля Set-Cookie заголовка HTTP-ответа сервера приведен далее:

Set- Cookie: < name>=< value> [ ; < name>=< value> ] ...
[ ; expires=< date> ] [ ; domain=< domain_name> ]
[ ; path=< some_path> ] [ ; secure] [ ; httponly]

Видно, что строка Set-Cookie заголовка ответа сервера состоит из последовательности подстрок, разделенных символами ";" (точка с запятой). Вначале следуют одна или несколько пар =. Каждая из этих пар соответствует одной куке с именем name и значением value. Потом следуют атрибуты, с которыми устанавливаются куки, содержащиеся в данном поле Set-Cookie. Далее приведено описание значений атрибутов cookie.

• Атрибут expires. Задается в формате: expires= . Определяет дату и время окончания действия устанавливаемых данным полем Set-Cookie заголовка HTTP-ответа сервера cookie. Значение должно являться строкой, задающей время по гринвичскому меридиану (GMT) в формате "DAY, DD-MMM-YYYY HH:MM:SS GMT" (например "Tue, 28 Feb 2006 12:41:04 GMT"). После истечения срока действия cookie удаляются браузером. Если атрибут expires не задан (время действия cookie не установлено), cookie удаляются при окончании работы браузера. Такие cookie называют "сессионными" (действуют только до окончания текущей сессии).
• Атрибут domain. Задается в формате domain= . Определяет окончание множества имен доменов, в которых действительны устанавливаемые cookie. К примеру, если при установке cookie, значение равно.codeguru.ru, установленные cookie будут отсылаться серверу при запросе документов с сайтов, расположенных на доменах web.codeguru.ru, forum.codeguru.ru, и.т.д. При этом дополнительным условием отсылки cookie будет являться проверка значения атрибута path - см. далее. Атрибут domain весьма полезен. Он может использоваться, например, для организации единой системы аутентификации пользователя для различных web-сервисов, расположенных на различных поддоменах. Например, на основном сайте и на форуме сайта. Во избежание неконтролируемой отсылки cookie, значение не должно содержать только имя зоны (например, .com, .net.ru, и.т.д.).
• Атрибут path. Задается в формате path= . Определяет множество URL, для которых действительны устанавливаемые cookie. Например, если значение при установке cookie равно /temp, то установленные cookie будут отсылаться при запросе документов, включая пути /temp000 и /temp/temp.htm. Если значение path не определено, в качестве него принимается путь к ресурсу, при запросе которого были установлены cookie.
• Атрибут secure. Это атрибут логического типа. Указание атрибута secure в поле Set-Cookie заголовка HTTP-ответа сервера делает устанавливаемые cookie защищенными. Такие cookie должны отсылаться на сервер только по протоколу https. HTTPS - это, практически, тот же протокол http, только данные между клиентом и сервером передаются через защищенное (данные шифруются) SSL (Secure Socket Layer) соединение.
• Атрибут HttpOnly. Это атрибут логического типа. Указание атрибута HttpOnly в поле Set-Cookie заголовка HTTP-ответа сервера делает устанавливаемые cookie не доступными клиентским скриптам (это применяется из соображений безопасности).

HTML будет выглядеть таким вот образом: