Записная книжка Cookies Notepad

В следующем примере мы применили cookie для хранения произвольного текста, набранного пользователем в многострочном окне редактирования (рис. 7.4).

Рис. 7.4. Документ с записной книжкой Cookies Notepad

При первой загрузке документа HTML с записной книжкой окно редактирования остается пустым. Вы можете набрать здесь любой текст и записать его в cookie, нажав кнопку Store text. Если теперь закрыть документ HTML и открыть его вновь, набранный вами ранее текст появится в окне редактирования.

Для того чтобы удалить текст и cookie, достаточно нажать кнопку Clear text.

Исходный текст документа HTML с записной книжкой Cookies Notepad представлен в листинге 7.2.

Листинг 7.2. Файл chapter7/Notebook/Notebook.html

<HTML>

<HEAD>

<TITLE>Cookies demo</TITLE>

<!--

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 + "=" + escape(szValue) + "; expires=" + dtExpiryDate;

}

function findCookie(szName)

{

var i = 0;

var nStartPosition = 0;

var nEndPosition = 0;

var szCookieString = document.cookie;

var szTemp = "";

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;

szTemp = document.cookie.substring(nStartPosition,nEndPosition);

return unescape(szTemp);

          break;

        }

        i++;

      }

      return "";

    }

    function removeCookie(szName)

    {

      var dtExpires = new Date();

      dtExpires.setTime(dtExpires.getTime() - 1);

      var szValue = findCookie(szName);

      document.cookie = szName + "=" + szValue +

        "; expires=" + dtExpires.toGMTString();

    }

    function btnClick()

    {

      addCookie("MyText",TestForm.Comment.value,10);

    }

    // -->

    </SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

    <H1>Cookies Notepad</H1>

    <FORM NAME="TestForm">

    <P><TEXTAREA NAME="Comment"

        ROWS="5" COLS="25" WRAP="physical">

      </TEXTAREA>

      <P><INPUT TYPE="button" VALUE="Store text"

      onClick="btnClick();">

      <INPUT TYPE="button" VALUE="Clear text"

      onClick="removeCookie('MyText');TestForm.Comment.value=''">

    </FORM>

    <SCRIPT LANGUAGE="JavaScript">

    

    </SCRIPT>

</BODY>

</HTML>

Функция addCookie, использованная нами в этом документе, имеет одну особенность: перед записью текстовой строки в параметр cookie она выполняет ее кодировку в формате URL, вызывая для этого функцию escape:

document.cookie = szName + "=" + escape(szValue) + "; expires=" + dtExpiryDate;

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

Аналогичные изменения мы внесли и в функцию findCookie. Эта функция возвращает значение, перекодированное в обычный текст функцией unescape, выполняющей действия, обратные по отношению к функции escape:

szTemp = document.cookie.substring(

nStartPosition,nEndPosition);

return unescape(szTemp);

Когда пользователь нажимает кнопку Store text, вызывается функция btnClick:

function btnClick()

{

addCookie("MyText",TestForm.Comment.value,10);

}

Эта функция просто записывает в параметр cookie с именем MyText текстовую строку, извлеченную из многострочного поля редактирования TestForm.Comment.value.

При удалении текста кнопкой Clear text вызывается функция removeCookie, удаляющая параметр cookie с именем 'MyText, а также записывается пустая строка в окно многострочного редактирования:

<INPUT TYPE="button" VALUE="Clear text"

onClick = "removeCookie('MyText'); TestForm.Comment.value=''">

В самом конце тела документа HTML находится небольшой фрагмент сценария JavaScript, запускающийся сразу после загрузки этого документа:

var szMyText="";

szMyText = findCookie("MyText");

if(szMyText != "")

{

TestForm.Comment.value = szMyText;

}

Этот фрагмент пытается получить значение параметра cookie с именем MyText. Если это ему удается и функция findCookie возвращает непустую строку, полученная строка записывается в окно многострочного поля редактирования TestForm.Comment.value.

В результате сразу после загрузки документа это окно оказывается заполненным текстом, сохраненным в cookie.

Вы можете посмотреть системный файл, хранящий данные cookie. Для этого откройте каталог Temporary Internet Files, расположенный в системном каталоге Microsoft Windows 95 или Microsoft Windows NT. Там должен быть файл и именем Notebook\. Вы можете скопировать этот файл, например, на поверхность рабочего стола и открыть для просмотра любым текстовым редактором. Вы увидите примерно это:

MyText

This%20is%20sample%20text.%0D%0A%u042D%u0442%u043E%20%u0442%u0435%u043A%u0441%u0442%2C%20%u043A%u043E%u0442%u043E%u0440%u044B%u0439%20%u044F%20%u043D%u0430%u0431%u0440%u0430%u043B%20%u0434%u043B%u044F%20%u043F%u0440%u0438%u043C%u0435%u0440%u0430.%0D%0A%0D%0A%u0410%u043B%u0435%u043A%u0441%u0430%u043D%u0434%u0440%20%u0424%u0440%u043E%u043B%u043E%u0432.

~~local~~/E:\JavaScript\Source\chapter7\Notebook\

0

642302464

29173566

2120102016

29171554

*

В самом начале файла видно имя MyText параметра cookie. На следующих строках до строки ~~local~~ расположено значение параметра MyText, соответствующее тексту, показанному на рис. 7.4.

Вслед за строкой ~~local~~ идет локальный адрес URL документа и другие параметры cookies, такие как дата, по достижению которой браузер удалит cookie.

Если удалить файл Notebook\ и затем открыть документ HTML, многострочное окно редактирования будет пустым. Удалив этот файл, мы удалим и расположенный в нем cookie.

Содержание раздела