Система уроков по JavaScript

Использование cookie

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

Проще всего представить себе cookie как набор строковых параметров, каждый из которых имеет имя и значение. Сценарий JavaScript может создавать cookie для документа HTML, определяя в нем произвольное количество параметров и задавая для них произвольные значения. После создания такой набор параметров становится принадлежностью данного конкретного документа HTML и может быть проанализирован, изменен или удален сценарием JavaScript.

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

Выполнение основных операций с cookie

Не вдаваясь в подробности организации хранения данных в cookie-файлах, рассмотрим основные функции, позволяющие сценариям JavaScript задавать значения cookie, считывать и удалять ранее заданные значения.

Создание cookie - addCookie

Данная функция позволяет сценариям JavaScript задавать значения cookie для страниц HTML.

function addCookie(szName,szValue,dtDaysExpires) 
{
   var dtExpires = new Date();
   var dtExpiryDate = "";

   dtExpires.setTime(dtExpires.getTime() + 
     dtDaysExpires * 24 * 60 * 60 * 1000);

   dtExpiryDate = dtExpires.toGMTString();

   document.cookie = 
    szName + "=" + szValue + "; expires=" + dtExpiryDate;
}

Эта функция addCookie получает три параметра. Через параметр szName передается имя параметра, хранящегося в cookie. Параметр szValue определяет значение этого параметра cookie. Параметр dtDaysExpires количество дней, через которое созданный cookie необходимо удалить.

Например, в следующей строке создается cookie с именем Count, значением 0, причем через 10 дней браузер автоматически удалит этот cookie:

addCookie("Count","0",10);

Получение значения cookie - findCookie

Ниже приведен текст функции, позволяющей прочитать значние ранее созданного cookie.

function findCookie(szName) 
{
  var i = 0;
  var nStartPosition = 0;
  var nEndPosition = 0;  
  var szCookieString = document.cookie;  

  while(i <= szCookieString.length) 
  {
    nStartPosition = i;
    nEndPosition = nStartPosition + szName.length;

    if(szCookieString.substring( 
        nStartPosition,nEndPosition) == szName) 
    {
      nStartPosition = nEndPosition + 1;
      nEndPosition = 
        document.cookie.indexOf(";",nStartPosition);

      if(nEndPosition < nStartPosition)
        nEndPosition = document.cookie.length;

      return document.cookie.substring( 
          nStartPosition,nEndPosition);  
      break;    
    }
    i++;  
  }
  return "";
}

С помощью этой функции, во-первых, можно проверить, установлен ли для данного документа cookie с заданным именем:

if(findCookie("Visit") == "")
{
  // cookie с именем Visit не установлен
  . . .
}
else
{
  // cookie с именем Visit установлен
  . . .
}

Во-вторых, данная функция позволяет записать в текстовую переменную значение параметра cookie с заданным именем:

var szVisitValue = findCookie("Visit");

Удаление cookie - removeCookie

Функция removeCookie удаляет ранее созданные cookie:

function removeCookie(szName) 
{
  var dtExpires = new Date();
  dtExpires.setTime(dtExpires.getTime() - 1);

  var szValue = findCookie(szName);

  document.cookie = szName + "=" + szValue +
    "; expires=" + dtExpires.toGMTString();
}

Примеры использования cookie

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

Листинг 7.1.

<HTML>
  <HEAD>
    <TITLE>Cookies demo</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function addCookie(szName,szValue,dtDaysExpires) 
    {
      var dtExpires = new Date();
      var dtExpiryDate = "";

      dtExpires.setTime(dtExpires.getTime() + 
        dtDaysExpires * 24 * 60 * 60 * 1000);

      dtExpiryDate = dtExpires.toGMTString();

      document.cookie = 
        szName + "=" + szValue + "; expires=" + 
        dtExpiryDate;
    }

    function findCookie(szName) 
    {
      var i = 0;
      var nStartPosition = 0;
      var nEndPosition = 0;  
      var szCookieString = document.cookie;  

      while (i <= szCookieString.length) 
      {
        nStartPosition = i;
        nEndPosition = nStartPosition + szName.length;

        if(szCookieString.substring( nStartPosition,nEndPosition) == szName) 
        {
          nStartPosition = nEndPosition + 1;
          nEndPosition = document.cookie.indexOf(";",nStartPosition);

          if(nEndPosition < nStartPosition)
            nEndPosition = document.cookie.length;

          return document.cookie.substring( nStartPosition,nEndPosition);  
          break;    
        }
        i++;  
      }
      return "";
    }

    function NewCount()
    {
      if(findCookie("Count") == "")
      {
        addCookie("Count","0",10);
      };
      var szCnt = findCookie("Count");
      var i=0;
         i = szCnt;
         i++;
         szCnt = i.toString();
         addCookie("Count",szCnt,10);
      document.write(szCnt);     
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Добро пожаловать!</H1>
    Вы обращаетесь к нашей страничке уже <b>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
      NewCount();
    // -->
    </SCRIPT>
    </b>-й раз!

  </BODY>
</HTML>

Посмотреть пример работы данного скрипта