Чтение из куки в jquery. Работа с cookie с помощью Jquery

На одном из форумов был вопрос как реализовать всплывающее окошко таким образом, чтобы, если посетитель окошко закрыл, то больше его не показывать. Решение пришло сразу — использовать куки, т.е. нужен был плагин, который «научил» бы jQuery работать с ними.

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

Подключение плагина jQuery Cookies

Проект находится на GitHub-e, но GitHub запрещает использовать прямые ссылки на файлы при подключении в страницу, поэтому файл плагина создадим вручную. Для этого создаем файл jquery.cookies.js, потом идем на страницу с кодом плагина — тырькс , выделяем его код (на момент написания статьи в коде плагина 114 строк) и копируем его в созданный ранее файл. Затем этот файл подключаем к странице нашего сайта (предположим что в корне сайта есть папка js в которую мы и положили наш файл) Заметьте, что библиотека jQuery, также обязательно должна быть подключена (в моем примере ниже она подключается с сайта google).

Таким способом создается новую куку (или изменяется значение существующей) с именем name и значением value . Но надо понимать, что данная кука будет храниться лишь до тех пор, пока пользователь не закроет браузер т.к. при установке мы не указали срок действия куки.

Если необходимо установить куку на определенный срок, например на 7 дней, то для этого используется специальный параметр expires :

$.cookie("name", "value", { expires: 7 });

$ . cookie ("name" , "value" , { expires : 7 } ) ;

Через 7 дней кука будет автоматически удалена. Максимальное время жизни куки можно установить равным 365 дням.

Параметр path позволяет указать страницы для которых установлена кука. Для примером выше, кука установится только для страниц, на которых она была установлена и не будет видна на других страницах сайта. Для того, чтобы кука была видна на всем сайте параметру path устанавливаем значение «/»

$.cookie("name", "value", { expires: 7, path: "/" });

Как видите установка куков очень проста.

Получение cookies

Получим установленную выше куку name:

$.cookie("name"); // => "value"

$ . cookie ("name" ) ; // => "value"

В случае, если кука не существует будет возращено undefined, например

if ($.cookie("nothing") == null) { alert("Кука не была установлена!"); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Назад Вперед

Установка и чтение cookies с помощью jQuery и PHP

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:

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

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

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

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

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

expires - если отсутствует, то значения могут запоминаться до закрытия браузером пользователем. Т.е. пока он его не закроет, сколько бы раз он не обновлял страницу, куки будут сохранены. Если указать число, то позволяет хранить куки определенное количество дней. Т.е. пока время не кончится куки будут помнить значения пользователя.

path - куки могут работать как на всем сайте (/), так и на определенной директории (/my/file/).

domain - домен, на котором будет создан кук (по умол. - текущий)

secure - если поставить true, то установленные куки будут отсылаются на сервер только по протоколу https (по умол. - false)

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

Установка 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

Мы собираемся использовать 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, что полностью соответствует логике работы плагина.

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

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