Добавить в избранное

JavaScript и куки (cookie)

Дата: 2011-11-21

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 ( "

document.location.reload ( );\">
Forget about me!
" );

}

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

Источник урока: ruseller.com

подготовлен tiwebmaster.ru

Просмотров: 4184

Последние 5 уроков

Обработка AJAX с помощью jQuery (часть 2)

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как.


Обработка AJAX с помощью jQuery (часть 1)

Первая статья посвящеа общему описанию технологии AJAX и потроение запросов при помощи метода $.get().


Размножения полей формы на сайте

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


Автосохранение данных, введенных в поля формы

Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.


10 вставок кода jQuery

jQuery вдохнул новую жизнь в JavaScript. В данном уроке приводится 10 вставок кода jQuery, которые облегчат решение повседневных задач, возникающих при создании веб приложений.


Видео уроки по php,jquery,ajax,css,html,сео