УРОКИ JAVASCRIPT HTML DOM DHTML AJAX ПРИМЕРЫ JAVASCRIPT РЕКЛАМА

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() при загрузке страницы.





« Назад Далее »
© 2011-2016 Уроки JavaScript