Cookies и хранение состояния

Автор:	Артемьев Сергей Игоревич
ICQ:
email:	[e-mail]

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

В JavaScript существует единственный механизм, позволяющий запомнить своё состояние – cookies (в переводе с английского – «печенье»). Откуда взято это название – теперь сказать сложно, но принято считать, что термин cookies появился ещё на заре развития Unix и локальных сетей.

Cookie – это небольшой текстовый блок, который браузер сохраняет на диск при первой загрузке страницы. При последующих обновлениях страницы cookie будет автоматически послан серверу вместе с GET- или POST-запросом.

Обычно cookie используются для хранения небольших фрагментов данных, таких как идентификаторы сессии PHP, временные сеансовые ключи, хеши паролей и т.д. Максимальный объём данных, который можно сохранить в одном cookie, составляет 4 Кб, а средний объём cookie обычно не превышает килобайта. Увлекаться хранением данных с cookies не стоит, т.к. они отправляются на сервер при каждом обновлении страницы. Так что если ваша страница «весит» 10 Кб, а в cookie вы сохранили все 4 Кб – то ваш трафик вырастет почти в полтора раза.

Любой cookie содержит несколько полей с фиксированными именами:

expires	Дата и время истечения "срока годности" cookie. По достижении этого времени он больше не будет отсылаться на сервер. Если этот параметр не указан - cookie сохраняется до закрытия браузера. Параметр должен всегда задаваться в формате "День, Число-Ден-ГГГГ ЧЧ:ММ:СС GMT", Например: expires=Mon, 20-Jan-2010 10:10:10 GMT Этот cookie перестанет отсылаться на сервер после 10 часов 10 минут 10 секунд 20 января 2010 года по Гринвичу.
path	Путь на сервере, для которого будет использоваться этот cookie. Если вы хотите задать cookie для всего сервера - поставьте "/"
domain	Имя домена, для которого действителен данный cookie. Этот параметр действет не только на основной домен, но и все его поддомены
secure	Параметр определяет, надо ли использовать для передачи cookie шифрованное соединение (HTTPS). Если не установлен - используется обычное соединение.

Кроме фиксированных полей, вы можете задавать свои. Элементы задаются в формате "ИМЯ=ЗНАЧЕНИЕ", например:

MYNAME=Дядя Вася

Перед тем, как запросить страницу на сервере, браузер проверяет, есть ли у него уже cookie от данного сервера (поля path и domain). Если есть и их «срок годности» не истёк (поле expires) – отправляет найденные данные серверу. Устаревшие cookie браузер при запросе страницы просто игнорирует.

Теперь рассмотрим порядок работы с cookies.

Единственный способ добраться до cookies текущего документа - использовать встроенный объект document.cookies. По сути это строка, содержащая все cookie, один за другим, разделённые точкой с запятой:

имя_1=значение_1;имя_2=значение_2;.....

Новый cookie добавляется обычным присвоением объекту document.cookie нового значения:

document.cookie = "myname=deniska";

Обратите внимание, что при обратной операции вы получите не последний установленный cookie, а ВСЕ cookies, соответствующие данному документу:

var list = document.cookie;// list теперь содержит все cookie документа

Рассмотрим комплексный пример, создадим несколько функций для манипулирования cookies.

<script language="JavaScript"> // получение cookie по заданному смещениюfunction GetValue (offset) { var strEnd = document.cookie.indexOf (";", offset); if (strEnd == -1) strEnd = document.cookie.length; return unescape(document.cookie.substring(offset, strEnd)); } //получение cookie по имениfunction GetCookie(name) { var key = name + "="; var i = 0; while (i < document.cookie.length) { var j = i + key.length; if (document.cookie.substring(i, j) == key) return GetValue (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } // установка cookie по имениfunction SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2)? argv[2]: null; var path = (argc > 3)? argv[3]: null; var domain = (argc > 4)? argv[4]: null; var secure = (argc > 5)? argv[5]: false; document.cookie = name + "=" + escape (value) + ((expires == null)? "": ("; expires=" + expires.toGMTString())) + ((path == null)? "": ("; path=" + path)) + ((domain == null)? "": ("; domain=" + domain)) + ((secure == true)? "; secure";: "");} // удаление одного cookiefunction DeleteCookie(strName){ document.cookie = strName + "=0; expires=" + (new Date(0)).toGMTString();} </script>

Теперь рассмотрим пример использования наших функций:

<script language="JavaScript"> var userName = GetCookie('username'); if (userName == null) { // пользователь не зарегистрирован userName = 'Гость'; } else { // извлекаем текущий адрес страницы pathName = location.pathname; // из адреса получем полное имя домена domain = pathName.substring(0,pathName.lastIndexOf('/')) +'/'; // получаем текущую дату var expDate = new Date (); // устанавливаем "срок годности"cookie на год expDate.setTime(expDate.getTime() + (365 * 24 * 3600 * 1000)); SetCookie('username',userName, expDate, domain); } // выводим имя пользователя на страницу document.write('<p align="center">Здравствуйте, ' + userName + '</p>'); </script>

Как видите, пользоваться cookie достаточно просто. Главное - правильно формировать соответствующие строки параметров.

В настоящее время практически все браузеры поддерживают cookies. Некоторые пользователи (примерно 2-4%) принудительно отключают такую поддержку, хотя лично я ничего опасного в cookies не вижу. Максимум, чем могут повредить включенные cookies – злоумышленник сможет узнать ваш логин и пароль почтового ящика, да и то – если вы будете слишком беспечны и начнёте открывать из веб-интерфейса почтовика всякие открытки, шутки и прочие опасные пакости.

Определить, включены у пользователя cookie или нет можно при помощи следующей функции:

// Функция возвращает true, если cookie включены,// в ином случае - false function IsCookieEnabled(){ // проверяем существование свойства navigator.cookieEnabled if(typeof(navigator.cookieEnabled)!= "undefined") return navigator.cookieEnabled; else { // если свойство navigator.cookieEnabled // не поддерживается, то просто попробуем // установить и получить назад тестовый cookie var tmpCookie = "testCookieForCheck"; SetCookie(tmpCookie, "1"); if(GetCookie(tmpCookie)!= null) { DeleteCookie(tmpCookie); return true; } return false; }}

Сookies дают массу преимуществ. Например, при регистрации на сайтах в форме регистрации обычно есть галочка «запомнить меня». Если вы её не ставите – сервер сохраняет временный cookie, действительный лишь до закрытия браузера. А вот если вы галочку поставили – сервер сохранит cookie с длительным сроком жизни, а значит при следующем заходе на этот сайт вы будете автоматически идентифицированы по ранее сохранённым данным. Аналогичный приём используется на большинстве сайтов. В большинстве браузеров предусмотрена возможность просмотра и управления cookie. Так что вы можете в любой момент зайти и посмотреть кто и что вам сохранял.

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

Дата добавления: 2015-08-27