HTML, Excel, Word, SEOОсновы JavaScript ⇒ Cookies и хранение состояния

ОСНОВЫ JavaScript

Учебник JavaScript
·Знакомство с JS. Переменные, операторы, операции
·Функции
·Модель HTML документа
·Иерархия документов в бразуере
·Формы
·Окна и фреймы
·Ссылки, заголовок, статус
·События
·События клавиатуры и мыши
·События. Таймер
·Стили. Управление стилями
·Слои и блоки. Управление видимостью
·Объекты JS
·Внешние объекты
·Внутренние объекты
·Массивы
·Регулярные выражения
·Математика в JS
·Пример простого калькулятора
·Дата и время
·Cookies и хранение состояния
·Немного об AJAX
·Работа с WebMoney

 

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), так и на стороне сервера (например, с помощью сессий).



В начало страницы



В начало страницы