Добавить в избранное

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

Дата: 2011-11-21

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

Далее самое интересное: разбор плагина для работы с куками.

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 будет выглядеть таким вот образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="http://www.ageent.ru/templates/ageent/script/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.ageent.ru/templates/ageent/script/jquery.cookie.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var c = new $.cookie(); // создаем объект для работы с куками

// блок для записи кук
$("button:eq(0)").click(function () {
c.text = prompt("Введем значение для text");
c.set({ expires: 300, path: '/'});
});

// блок для удаления кук
$("button:eq(1)").click(function () {
c.text="";
c.set({ expires: -300, path: '/'});
});

//блок который показывает содержимое всех кук
$("button:eq(2)").toggle(
function () {
$(".too").html(document.cookie);
$(this).html("Спрятать куки");
},
function () {
$(".too").html("");
$(this).html("Как выглядят куки в реале");
}
);

//блок который показывает что мы записали в куки
$("div").live("mousemove", function(){
c.get(); // получаем куки
if((typeof(c.text) != 'undefined' )) {
$(".one").html("Мы записали в куки: <b>text: "+c.text+"</b>");
}
if((c.text == "")) {
$(".one").html("");
}
});
});
</script>
</head>

<body>
<div class="main">
<button>Записать значение в куки</button>
<button>Очистить куки</button>
<button>Как выглядят куки в реале</button>
<div class="one"></div>
<div class="too"></div>
</div>
</body>
</html>

 

Просмотров: 2815

Последние 5 уроков

Как бороться со всем знакомыми багами IE

Несмотря на то что в основном пользуюn CSS3, иногда все же вынуждают бороться и с Internet Explorer при создании проектов, которые необходжимо зделать кросс-браузерными.


Красивый навигационный блок

Небольшая статья по созданию блока меню, который Вы можете использовать на своем сайте.


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

Пример работы с куками на jquary + исходники статьи.


Структура DOM в случае ошибок в разметке HTML

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


Видео уроки по php,jquery,ajax,css,html,сео