Использование куки из jQuery. Cookie в jQuery - установка, настройка и примеры использования

Новости 16.06.2019

На одном из форумов был вопрос как реализовать всплывающее окошко таким образом, чтобы, если посетитель окошко закрыл, то больше его не показывать. Решение пришло сразу — использовать куки, т.е. нужен был плагин, который «научил» бы 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("Кука не была установлена!"); }

Веб-браузеры могут генерировать уникальные сессии, предназначенные для каждого пользователя на сайте. Зачастую этот процесс реализован во внутреннем интерфейсе при помощи таких языков как 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. Интернет-магазины сегодня очень популярны, и развитие в сфере веб-разработки позволяет гораздо проще их организовать и поддерживать. Вы можете скачать пример кода, и проверить, каким образом вы можете использовать данный пример в собственных проектах, а также попробовать усовершенствовать функционал.

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
});

Как получить значение куки?Здесь все просто
var coo = $.cookie("cookie_name"); Удаление cookieЕсли вы устанавливали куки для всего сайта, то и удалять нужно для всего
$.cookie("cookie_name",null,{path: "/"});

На днях решил подробно разобраться с куками: как работают, как устроены, как использовать. Для окончательного понимания было принято решение скачать плагин для работы с куками на 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 не доступными клиентским скриптам (это применяется из соображений безопасности).
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 будет выглядеть таким вот образом:

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



Рекомендуем почитать