Cookies и хранение состояния
Автор: Артемьев Сергей Игоревич ICQ: 438856621 email: _spin_@bk.ru |
Как мы уже говорили, при каждой загрузке страницы и при каждом её обновлении скрипты начинают выполняться заново. С одной стороны - это хорошо, т.к. можно не заботиться о предыдущих состояниях скрипта. Но с другой стороны – иногда надо хранить данные о предшествующих действиях или введённых пользователм данных.
В 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"; : ""); } // удаление одного cookie function 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), так и на стороне сервера (например, с помощью сессий).