Информация к новости
  • Просмотров: 1085
  • Автор: sulicompany
  • Дата: 22-06-2012, 00:34
 (голосов: 0)
22-06-2012, 00:34

JavaScript и куки (cookie)

Категория: Программирование » JavaScript


javascript дает возможность устанавливать и читать куки в браузере. В данном уроке мы рассмотрим как происходит работа с куками, а также сделаем простую страницу, которая будет помнить введеное имя и отображать его при каждом входе.

Что такое куки (cookie)?

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

Обычно куки используются веб сервером для выполнения таких функций как отслеживание посещений сайта, регистрации на сайте и сохранения сведений о заказах или покупках. Однако нам не нужно придумывать программу для вэб сервера чтобы использовать куки. Мы можем использовать их с помощью javascript.

Свойство document.cookie.

В javascript куки доступны с помощью свойства cookie объекта document. Создать куки можно следующим образом:

 document.cookie = "name=значение; expires=дата; path=путь; domain=домен; secure"; 

... и получить весь сохраненый набор куков так:

 var x = document.cookie; 

Давайте рассмотрим сохранение и получение куков более подробно.

Сохранение куки

Для сохранения куки нужно присвоить document.cookie текстовую строку, которая содержит свойства куки, которые мы хотим создать:

 document.cookie = "name=значение; expires=дата; path=путь; domain=домен; secure"; 

Свойства описаны в таблице:

СвойствоОписаниеПример
name=значениеУстанавливает имя куки и его значение.username=Вася
expires=датаУстанавливает дату истечения срока хранения куки. Дата должна быть представлена в формате, который возвращает метод toGMTString()объекта Date. Если значение expires не задано, куки будет удалено при закрытии браузера.expires=
13/06/2003 00:00:00
path=путьДанная опция устанавливает путь на сайте, в рамках которого действует куки. Получить значение куки могут только документы из указанного пути. Обычно данное свойство оставляют пустым, что означает что только документ установивший куки может получит доступ к нему.path=/demo/
domain=доменДанная опция устанавливает домен, в рамках которого действует куки. Получить значение куки могут только сайты из указанного домена. Обычно данное свойство оставляют пустым, что означает, что только домен установивший куки может получит доступ к нему.domain=ruseller.com
secureДанная опция указывает браузеру, что для пересылки куки на сервер следует использовать SSL. Очень редко используется.secure

Давайте посмотрим пример установки куки:

 document.cookie = "username=Вася; expires=15/02/2011 00:00:00"; 

Данный код устанавливает куки username, и присваивает ему значение "Вася", которое будет храниться до 15-го февраля 2011 года (используется Европейский формат времени!).

 var cookie_date = new Date ( 2003, 01, 15 ); document.cookie = "username=Вася; expires=" + cookie_date.toGMTString(); 

Данный код выполняет точно такое же действие, как и предыдущий пример, но для установки даты используется метод Date.toGMTString(). Учтите, что нумерация месяца в объекте Date начинается с 0, то есть февраль - это 01.

 document.cookie = "logged_in=yes"; 

Данный код устанавливает куки logged_in, и присваивает ему значение "yes". Так как атрибут expires не установлен, то куки удалится при закрытии браузера.

 var cookie_date = new Date ( ); // Текущая дата и время cookie_date.setTime ( cookie_date.getTime() - 1 ); document.cookie = "logged_in=; expires=" + cookie_date.toGMTString(); 

Данный код устанавливает куки logged_in и присваивает сроку хранения значение времени за одну секунду перед текущим - такая операция приведет к немедленному удалению куки. Ручной способ удалить куки!

Перекодирование значения куки!

Следует перекодировать значение куки для корректного хранения и отображения таких символов как пробел и двоеточие. Такая операция гарантирует, что браузер корректно воспримет значение. Перекодирование лекго выполняется функцией javascript escape(). Например:

 document.cookie = "username=" + escape("Вася Пупкин") + "; expires=15/02/2003 00:00:00"; 

Функция для установки куки

Установка куки станет проще, если мы напишем специальную функцию, которая будет выполнять простые операции, такие как перекодирование значений и построение строки document.cookie. Например:

 function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure ) { var cookie_string = name + "=" + escape ( value ); if ( exp_y ) { var expires = new Date ( exp_y, exp_m, exp_d ); cookie_string += "; expires=" + expires.toGMTString(); } if ( path ) cookie_string += "; path=" + escape ( path ); if ( domain ) cookie_string += "; domain=" + escape ( domain ); if ( secure ) cookie_string += "; secure"; document.cookie = cookie_string; } 

Функция получает данные для куки в качестве аргументов, затем строит соответствующую строку и устанавливает куки.

Например, установка куки без срока хранения:

 set_cookie ( "username", "Вася Пупкин" ); 

Установка куки со сроком хранения до 15 февраля 2011:

 set_cookie ( "username", "Вася Пупкин", 2011, 01, 15 ); 

Установка куки со сроком хранения, доменом ruseller.com, использованием SSL, но без пути:

 set_cookie ( "username", "Вася Пупкин", 2003, 01, 15, "", "ruseller.com", "secure" ); 

Функция для удаления куки.

Другая полезная функция для работы с куки представлена ниже. Функция "удаляет" куки из браузера посредством установки срока хранения на одну секунду раньше текущего значения времени.

 function delete_cookie ( cookie_name ) { var cookie_date = new Date ( ); // Текущая дата и время cookie_date.setTime ( cookie_date.getTime() - 1 ); document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString(); } 

Для использования данной функции нужно только передать ей имя удаляемого куки:

 delete_cookie ( "username" ); 

Получение значения куки

Для того, чтобы получить значение предварительно установленного куки для текущего документа, нужно использовать свойство document.cookie:

 var x = document.cookie; 

Таким образом возвращается строка, которая состоит из списка пар имя/значение, разделенных точкой с запятой длявсех куки, которые действуют для текущего документа. Например:

 "username=Вася; password=abc123" 

В данном примере 2 куки, которые были предварительно установлены: username, который имеет значение "Вася", иpassword, который имеет значение "abc123".

Функция для получения значения куки

Обычно, нам нужно только значение одного куки за один раз. Поэтому строка куки не удобна для использования! Здесь приводится функция, которая обрабатывает строку document.cookies, возвращет только то куки, которое представляет интерес в конкретный момент:

 function get_cookie ( cookie_name ) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null; } 

Данная функция использует регулярное выражение для поиска имени куки, которое представляет интерес, а затем возвращает значение, которое обработано функцией unescape() для перекодирования к нормальному символьному виду. (Если куки не найдено, возвращается значение null.)

Данная функция проста в использовании. Например, для возврата значения куки username:

 var x = get_cookie ( "username" ); 

Простой пример использования

В данном примере мы сделали страницу, которая запрашивает Ваше имя при первом посещении, затем она сохраняет Ваше имя в куки и показывает его при следующих посещениях.

Откройте  в новом окне. При первом посещении она попросит ввести имя и сохранит его в куки. Если Вы посетите страницу еще раз, она отобразит на экране введенное имя из куки.

Для куки задаем срок хранения в 1 год от текущей даты, это означает, что браузер сохранит Ваше имя даже если Вы закроете его.

Вы можете удалить куки нажав на ссылку Забудь обо мне!, которая вызывает функцию delete_cookie() и обновляет страницу, чтобы снова запросить имя у Вас.

Вы можете посмотреть код страницы в браузере, выбрав функцию просмотра исходного кода. Здесь приводится основная часть кода:

 if ( ! get_cookie ( "username" ) ) { var username = prompt ( "Пожалуйста, введите Ваше имя", "" ); if ( username ) { var current_date = new Date; var cookie_year = current_date.getFullYear ( ) + 1; var cookie_month = current_date.getMonth ( ); var cookie_day = current_date.getDate ( ); set_cookie ( "username", username, cookie_year, cookie_month, cookie_day ); } } else { var username = get_cookie ( "username" ); document.write ( "Привет, " + username + ", добро пожаловать на страницу!" ); document.write ( "<br><a href=\"javascript:delete_cookie('username'); document.location.reload ( );\"> Forget about me!</a>" ); } 

Данный урок показал Вам, как использовать куки в javascript для хранения информации о Ваших посетителях. Спасибо за внимание! :)