- •Что такое cookies и как с ними работать
- •Создание cookies в JavaScript
- •Получение значения cookies в JavaScript
- •Cookies и хранение состояния
- •Пример работы с cookie
- •JavaScript и куки (cookie)
- •Что такое куки (cookie)?
- •Свойство document.Cookie.
- •Сохранение куки
- •Перекодирование значения куки!
- •Функция для установки куки
- •Функция для удаления куки.
- •Получение значения куки
- •Функция для получения значения куки
- •Простой пример использования
- •Счетчик посещений с использованием cookie Вы были здесь 1 раз(а).
- •Несколько примеров использования cookie
- •Фиксация повторных посещений страницы
- •Записная книжка Cookies Notepad
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), так и на стороне сервера (например, с помощью сессий).