Jquery cookie время жизни. Топ плагинов jQuery

Веб-браузеры могут генерировать уникальные сессии, предназначенные для каждого пользователя на сайте. Зачастую этот процесс реализован во внутреннем интерфейсе при помощи таких языков как PHP или Ruby, но мы также можем использовать cookie-сессии на внешнем интерфейсе при помощи javascript. Существует множество руководств, в которых рассказывается о том, как генерировать чистые JS-cookie. Но новая jQuery-библиотека Cookies в значительной степени упрощает процесс.

Позвольте нам рассказать, как при помощи можно реализовать очень простую систему аутентификации. Весь код будет представлен на внешнем интерфейсе, но для того, чтобы увидеть результаты работы, вам понадобится live-сервер для тестирования. Браузерные cookies будут создавать на локальный IP, предложенный веб-сервером, а это значит, что к сожалению вы не сможете запускать эти скрипты локально. Не забудьте ознакомиться с live-демо, чтобы понять, о чем пойдет речь.

Внимание! У вас нет прав для просмотра скрытого текста.

Основа документа

Для начала мы создадим примерный HTML5-документ с единственной ссылкой на библиотеку jQuery, а также с функцией jQuery Cookies. Вы можете скачать их напрямую , и единственный файл, который нам понадобится, это jquery.cookie.js.






Managing Cookies with jQuery - Live Demo







Руководство будет сосредоточено на создании двух разных представлений для страницы. Сначала у нас будет форма авторизации, которая будет отображаться при отсутствии cookie. Используя стандартные значения demo/demo, вы можете авторизоваться при помощи формы, и она сохранит вашу сессию в cookie.

Очевидно, если подключить скрипт к базе данных, у вас будет возможность обслуживать большое число логинов. Это значит, что при помощи единственного скрипта вы сможете авторизовать множество людей, и при этом хранить их логины или ID в локальных cookie. Данный пример представляет лишь стартовую точку, где нам не нужны Ajax-запросы или скрипты на стороне сервера для авторизации пользователей.

Содержимое внутреннего элемента

Первый div – это оболочка, в которой содержится вся страница. Здесь предусмотрена форма с ID #loginform, которая отображается первой. Она будет скрыта посредством jQuery только в том случае, если посетитель на данный момент авторизован в демо-аккаунт с использованием cookie-сессии.



Basic Cookie Management

Login to the demo account with the following username/password: demo/demo


Username:

Password:




You are logged in as demo! The cookie is set to expire in 1 day from the original login.

Want to logout? Easy!

Logout Now





Вы наверное заметили, что в HTML после формы авторизации есть еще один div с id #logindetails. Ее мы скрыли при помощи CSS-стилей, так как нам нужно, чтобы она отображалась пользователю только в том случае, если он авторизован. Внутренний HTML-код статичен, и всегда отображает имя пользователя demo. Но при работе с базой данных, вы можете обновлять этот параметр на любое имя пользователя посредством javascript.

CSS-стили не так уж и запутаны, но было бы неплохо вдаться в некоторые подробности. Мы создали глянцевую CSS3-кнопку, воспользовавшись советами из руководства . Эти стили довольно развернутые, и их следует сохранить для повторного использования и в других проектах.

/** form elements **/
form label { font-size: 1.1em; line-height: 1.25em; font-weight: bold; margin-bottom: 5px; }

form input.basic {
display: block;
outline: none;
font-size: 1.5em;
color: #525252;
width: 300px;
padding: 10px 8px 10px 8px;
margin-bottom: 7px;
border: 1px solid #888;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

#logindetails {
display: none;
}
Мы также изменили стандартные элементы ввода таким образом, чтобы они лучше сочетались со страницей. Контейнер с деталями логина обозначен свойством display: none, так что он не займет места на сгенерированной странице. Тем не менее, он по прежнему составляет активную часть DOM, и это значит, что мы можем управлять значением display при помощи jQuery. Теперь давайте взглянем в данный jQuery-код, расположенный на дне страницы, сразу перед закрывающим тегом body.

Cookies в jQuery

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

$(function(){
if($.cookie("username")) {
$("#loginform").hide();
$("#logindetails").show();
}
Несомненно, бывают и более хорошие способы управления этой формой при помощи языков внутренних интерфейсов, но в нашем демо и jQuery отлично справляется. Запуская выражение if напротив $.cookie(‘username’), мы проверяем, существует ли cookie “username”. Если да, то нам известно, что пользователь на данный момент авторизован в свой аккаунт, поэтому мы скрываем форму авторизации и показываем информацию о логине. В противном случае ничего не происходит, и мы просто наблюдаем страницу с формой авторизации.

$("#loginform").submit(function(e){
e.preventDefault();
var inputuname = $("#username").val();
var inputpass = $("#password").val();

If(inputuname == "demo" && inputpass == "demo") {
// successful validation and create cookie
$.cookie("username", "demo", { expires: 1 });
var currentusr = $.cookie("username");
window.location.reload();
}
});

$("#logoutbtn").on("click", function(e){
e.preventDefault();
if($.removeCookie("username")) {
$("#logoutcontainer").html("Successfully logged out! Refreshing the page now...");
window.setTimeout("location.reload()", 2000); // refresh after 2 sec
}
});
});
Мы скомбинировали эти две функции в единый блок кода, так как они очень похожи между собой. Как только пользователь делает попытку авторизоваться в аккаунт, мы проверяем, совпадает ли username/password с “demo”. Если да, то мы запускаем $.cookie(‘username’, ‘demo’, { expires: 1 });, куда включено несколько опций.

Сначала мы назначаем имя cookie “username”, по которому мы сможем проверять значение. Строка “demo” – это значение cookie, но важно помнить, что мы можем ввести любое имя пользователя или даже id, если в ином случае этот метод будет подходить больше. Наконец, последний параметр – это коллекция опций, которая устанавливает количество дней до истечения действия cookie. Если мы опустим опцию истечения, тогда cookie будут удаляться сразу же, как только пользователь закрывает браузер. Это также упоминается в сессии cookie, и ниже мы привели простой пример, прокомментированный внизу скрипта.

Второй блок кода отслеживает клики пользователя по ссылке #logoutbtn. Очевидно, что ссылка на выход будет отображаться только в том случае, если пользователь на данный момент авторизован. Эта функция будет терминировать сессию, запуская $.removeCookie(‘username’) внутри выражения if. Так что, если мы можем удалить cookie, то затем нам нужно убрать кнопку выхода и показать сообщение об успешном совершении действия, и представить форму авторизации.

В завершение

Cookies очень удобны для хранения информации как об авторизации, так для других целей. Вы можете организовать интернет-магазин, работающий на сессиях во внутреннем интерфейсе при помощи уникальных id cookie. Интернет-магазины сегодня очень популярны, и развитие в сфере веб-разработки позволяет гораздо проще их организовать и поддерживать. Вы можете скачать пример кода, и проверить, каким образом вы можете использовать данный пример в собственных проектах, а также попробовать усовершенствовать функционал.

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

Представим, что на вашем сайте есть возможность выбрать цветовую схему сайта. Очень удобно это реализовать на куки, так как выбранная им тема будет видна только ему.

Cookie существуют как в PHP, так и в jQuery. Поэтому рассмотрим каждый случай более подробно.

Подробная инструкция по работе с Cookie на jQuery

1. Установка Cookie

Теперь мы можем попробовать создать наш первый куки:

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/", domain: "your_site.ru", secure: true });

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«expires » – количество дней хранения куки (в нашем случае – 3 дня). По истечении этого времени произойдет автоматическое удаление куки;

«path » – доступность куки на сайте (в нашем случае «/ » - доступна на всем сайте). По желанию можно задать только определенную страницу или раздел, где будет доступен куки, например, «/audio/rock »;

«domain » – домен, на котором куки действителен. Если у вас есть поддомен, то можете указать его в этом параметре, например, «domain: "subdomain.your_site.ru" », и в таком случае куки будет доступен только на домене «subdomain.your_site.ru »;

«secure » – параметр, указывающий, что куку нужно передавать по защищенному протоколу https.

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

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/" });

2. Получение Cookie

Получить куки довольно просто, сделать это можно с помощью кода:

$.cookie("cookie_name");

Данный код можно присвоить к переменной и использовать в своих нуждах:

var content = $.cookie("cookie_name"); if(content != null) { alert("Куки существует!"); } else { alert("Куки нет!"); }

Согласитесь, это весьма удобно.

3. Удаление Cookie

Чтобы удалить значение куки, присвойте ему значение «null »:

$.cookie("cookie_name", null);

На этом, я думаю, знакомство с работой с Cookie на jQuery закончено. Этих знаний вполне хватит для реализации ваших идей.

Подробная инструкция по работе с Cookie на PHP

В отличие от предыдущего варианта работы с куки, здесь не нужно ничего подключать.

1. Установка Cookie

Для того чтобы установить в PHP куки, мы воспользуемся встроенной функцией «setcookie »:

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«time()+3600 » – время жизни куки в секундах (в нашем случае – 1 час). Если задать время жизни равное «0 », то куки удалится сразу, как будет закрыт браузер;

«/ » – раздел, в котором доступен куки (в нашем случае – доступен на всем сайте). Если вы хотите ограничить раздел, в котором куки будет доступен, то «/ » замените, например, на «/audio/rock »;

«your_site.ru » – домен, на котором куки будет доступен;

«true » – параметр, указывающий что куки доступен только по защищенному протоколу https. В противном случае значение – false ;

«false » – параметр, указывающий, что куки доступен скриптовым языкам. В противном случае – true (доступно только по http).

Здесь также не все параметры являются обязательными, и для создания куки вам хватит такой конструкции:

Для удобства значение куки можно задать через переменную:

2. Получение Cookie

Для того чтобы получить куки, вам необходимо воспользоваться:

$_COOKIE["cookie_name"];

Чтобы исключить появление ошибок из-за возможного отсутствия куки, воспользуйтесь :

Как и в предыдущем примере работы с Cookie на jQuery, куки можно присвоить к переменной:

3. Удаление Cookie

Удаление куки на PHP выполняется так же просто, как и в jQuery. Все, что вам нужно сделать, это задать пустое значение куки и отрицательное время (время, которое уже прошло):

Setcookie ("cookie_name", "", time() - 3600);

Время в данном примере равняется часу назад, чего вполне хватит для удаления куки.

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

Когда я изучал 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);

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