|
|
JavaScript Урок 30 Хранение Информации на Клиентском Компьютере - cookies
cookie часто используется для идентификации пользователя.
Что Такое Cookie?
cookie - это переменная, которая хранится на компьютере посетителя. Каждый раз, когда один и тот же компьютер запрашивает страницу в браузере, он также посылает cookie. С помощью JavaScript вы можете как создавать, так и извлекать значения cookie.
Примеры cookies:
- cookie с именем - Когда первый раз посетитель приходит на вашу веб страницу, он должен указать его имя. Имя чаще всего хранится в cookie. В следующий раз, когда пользователь посетит вашу страницу, он может получить приветствие, например "Добро пожаловать, Вася Петров!" Имя извлекается из хранимой cookie
- cookie с паролем - Первый раз, когда пользователь приходит на вашу веб страницу, он должен ввести пароль. Пароль затем может быть сохранен в cookie. В следующий раз, когда посетитель вновь придет на страницу, пароль извлекается из cookie
- cookie с датой - Когда первый раз посетитель приходит на вашу веб страницу, текущая дата сохраняется в cookie. В следующий раз, когда пользователь вновь придет на страницу, он получит сообщение, например "Ваш последний визит был во Вторник 11 августа, 2005 года!" Дата извлекается из сохраненного cookie
Создание и Хранение Cookie
В этом примере мы создадим cookie, которая сохраняет имя посетителя. Первый раз, когда пользователь постетит веб страницу, ему будет предложено ввести свое имя. Затем имя сохранится в cookie. В следующий раз, когда посетитель придет вновь на ту же страницу, он получит приветственное сообщение.
Сначала, мы создадим функцию, которая сохраняет имя посетителя и переменную cookie:
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
} |
Параметры функции выше включают имя cookie, значение cookie, и количество дней, в течение которых будет храниться cookie.
В этой функции мы сначала получаем текущую дату, затем мы добавляем к ней количество дней, в течение которых должна храниться cookie. После этого мы сохраняем имя cookie, значение cookie и "срок годности" в объект document.cookie.
Теперь мы создадим другую функцию, которая возвращает указанную cookie:
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
} |
Функция выше создает массив для извлечения имен cookie и значений, затем она проверяет, существует ли указанная cookie, и возвращает значение cookie.
Наконец, мы создадим функцию, которая показывает приветствие, если cookie установлена, а если cookie не установлена, то функция выведет окно приглашения, спрашивая имя пользователя, а затем сохраняет введенное имя на срок 365 дней, вызывая функцию setCookie:
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Добро пожаловать " + username);
}
else
{
username=prompt("Пожалуйста, введите ваше имя:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
} |
А теперь все вместе:
Пример
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
}
else
{
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
|
Пример выше запускает функцию checkCookie() при загрузке страницы.
|
|
