Веб-браузеры могут генерировать уникальные сессии, предназначенные для каждого пользователя на сайте. Зачастую этот процесс реализован во внутреннем интерфейсе при помощи таких языков как 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
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. Интернет-магазины сегодня очень популярны, и развитие в сфере веб-разработки позволяет гораздо проще их организовать и поддерживать. Вы можете скачать пример кода, и проверить, каким образом вы можете использовать данный пример в собственных проектах, а также попробовать усовершенствовать функционал.
jQuery Cookies - это плагин для работы с куками, который значительно облегчает данный процесс. Нам понадобиться подключенная библиотека Jquery и сам плагин Установка куки $.cookie("cookie_name", "cookie_value"); Таким не хитрым способом мы создали куку с именем cookie_name и значением cookie_value . Данная кука будет храниться лишь до тех пор, пока пользователь не закроет браузер, потому что при установке мы не указали срок действия куки.Если вам необходимо установить куку на определенный срок, например на 1 день, нужно использовать специальный параметр expires
:
expires: 1
});
Два этих примера будут устанавливать куку для путей текущего уровня. То есть если этот код сработал на странице http://mysite.ru/dir/
, то кука будет установлена для пути /dir и уже не будет доступна в корне сайта.
Для того чтобы использовать куку на всем сайте, необходимо использовать параметр path
$.cookie("cookie_name", "cookie_value", {
expires: 1,
path: "/",
});
При установки cookie, вы можете задавать и другие параметры.
domain – задает домен, на котором данная кука будет актуальна. По умолчанию, это домен той страницы, на которой кука была создана. В значении этого параметра, можно указать поддомен.
$.cookie("cookie_name", "cookie_value", {
domain: "one.mysite.ru"
});
secure
– если true, то установленные куки будут защищенными и отсылаются на сервер только по протоколу https. Данный параметр редко применяется, поэтому значение по умолчанию - false.
$.cookie("cookie_name", "cookie_value", {
expires: 1,
path: "/",
secure: true
});
От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с практически незаменимым плагином для большинства сайтов. Речь идет о плагине jQuery Cookie. Как вы уже догадались из названия, задача плагина — работа с куками.
Задача хранения пользовательских настроек и работы с ними встает перед нами в любом мало-мальски серьезном проекте. Например, классическая задача представления товаров в интернет-магазине в виде списка или в табличном виде. Пользователь волен выбрать наиболее удобный для него способ представления, ну а мы должны запомнить его и не забыть показать в удобном виде как в пределах текущего сеанса, так и при следующем обращении к сайту.
Еще один классический пример — запоминание авторизации пользователя. Пользователь авторизуется на сайте, выбрав опцию Запомнить. При обращении к сайту на следующий день ему уже не нужно тратить время на авторизацию, пользовательская сессия будет восстановлена автоматически.
Все эти чудеса возможны благодаря кукам. Куки — это некоторый набор данных, который хранится на компьютере пользователя и доступен для JavaScript. Также браузер отправляет конкретные куки сайта при запросе сервера.
Для удобной работы с куками мы можем воспользоваться специальным плагином jQuery Cookie , работа с которым очень проста. Скачаем и подключим единственный файл плагина:
|
После этого нам доступна пара полезных методов: cookie() и removeCookie(). Первый метод позволяет устанавливать куки, второй — удалять их. Давайте рассмотрим примеры, они предельно просты. Важное замечание! Работу с данным кодом желательно производить на сервере.
Итак, для того, чтобы установить куку, нам достаточно вызвать метод cookie(), передав ему пару параметров. Первый параметр определяет имя создаваемой куки, второй параметр — ее значение:
$.cookie("name", "Andrey");
$ . cookie ("name" , "Andrey" ) ; |
Если теперь открыть консоль браузера и заглянуть в раздел Cookies, то там мы увидим примерно такую картину:
Кука успешно создана и даже если мы закомментируем теперь строку кода, создающую ее, и обновим страницу — кука никуда не денется. Она доступна нам в течение пользовательской сессии, т.е. до закрытия браузера. Если нам нужно создать куку на более длительный срок, тогда мы можем указать его третьим параметром:
$.cookie("name2", "John", {expires: 3});
$ . cookie ("name2" , "John" , { expires : 3 } ) ; |
Таким способом мы создали куку, продолжительность жизни которой 3 дня.
console.log("Это кука name: " + $.cookie("name")); console.log("Это кука name2: " + $.cookie("name2"));
console . log ("Это кука name: " + $ . cookie ("name" ) ) ; console . log ("Это кука name2: " + $ . cookie ("name2" ) ) ; |
Когда я изучал 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. Ссылочка на плагин прилагается 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
jQuery.cookie
=
function
()
{
var url = location.href ; // путь для устанавливаемых кук this .cookieID = "cookie" ; // имя для переменной, которая будет содержать наши куки this .set = function (options) { // Функция для установки кук var cookieContent = "" ; // инициализируем переменную для цикла for var filterProperties = { "cookieID" : 0 , "set" : 1 , "get" : 2 } ; // создаем объект с известными значениями options = options || { } ; // если переданы пользовательские переменные, используем их. По умолчанию ничего не устанавливаем for (var property in this ) { // перебираем все элементы полученного объекта if (! (property in filterProperties) ) { // вытягиваем все элементы кроме тех, которые содержатся в filterProperties if (this [ property] === null ) this [ property] = "" ; // если имеем ноль заменяем на "" cookieContent += (property) + ":" + (this [ property] ) + "," ; // записываем имя переменной + значение переменной } } cookieContent = cookieContent.substring (0 , cookieContent.length - 1 ) ; // удаляем последнюю запятую var expires = "" ; // инициализируем переменную if (options.expires && (typeof options.expires == "number" || options.expires .toUTCString ) ) { // если у нас есть какое ли значение то var date; // создаем переменную для даты if (typeof options.expires == "number" ) { // если это число date = new Date() ; // текущую дату date.setTime (date.getTime () + (options.expires * 24 * 60 * 60 * 1000 ) ) ; // устанавливаем время } else { date = options.expires ; // пустое значение; куки будут храниться до конца сессии } expires= "; expires=" + date.toUTCString () ; // устанавливаем время жизни кук } var path = options.path ? "; path=" + (options.path ) : "" ; // устанавливаем url для которых действительны устанавливаемые куки var domain = options.domain ? "; domain=" + (options.domain ) : "" ; // устанавливаем мия сайта var secure = options.secure ? "; secure" : "" ; // указываем, следует ли шифровать данные или нет document.cookie = [ this .cookieID , "=" , encodeURIComponent(cookieContent) , expires, path, domain, secure] .join ("" ) ; // делаем из массива строку и записываем ее в куки return true ; } ; this .get = function () { // функция для получения кук var cookieValue = "" ; if (document.cookie && document.cookie != "" ) { // если куки доступны и существуют var cookies = document.cookie .split (";" ) ; // разбили и получили массив for (var i = 0 ; i < cookies.length ; i++ ) { // выполняем перебор массива var cookie = jQuery.trim (cookies[ i] ) ; // обрезали все отступы if (cookie.substring (0 , this .cookieID .length + 1 ) == (this .cookieID + "=" ) ) { // находим слово cookie cookieValue = decodeURIComponent(cookie.substring (this .cookieID .length + 1 ) ) ; // выдернули все значения break ; } } var properties = cookieValue.split ("," ) ; // разбили все значения по, в массив for (var i = 0 ; i< properties.length ; i++ ) { // перебрали массив var property = properties[ i] .split (":" ) ; // разбили каждый элемент и this [ property[ 0 ] ] = property[ 1 ] ; // добавили свойства к объектам } } return true ; } ; return this ; } ; |
HTML будет выглядеть таким вот образом:
