Оглавление

17.18. Сохранение данных на компьютере клиента

Web-браузеры позволяют сохранять небольшой объем информации в специальном текстовом файле на компьютере пользователя. Такая информация называется cookies. Возможность использования cookies можно отключить в настройках Web-браузера. Для проверки возможности использования cookies следует использовать свойство cookieEnabled объекта navigator.

   if (navigator.cookieEnabled) {
      window.alert("Использование cookies разрешено");
   }

 

Запись cookies производится путем присвоения значения свойству cookie объекта document в следующем формате:
document.cookie = "<Имя>=<Зкачение>; [expires=<flaTa>;]
[domain=<Имя домена>;][path=<nyTb>;] [secure;]";

 

Здесь используются следующие параметры:
□   <Имя>=<Значекие> задает имя сохраняемой переменной и ее значение. Это единственный обязательный параметр. Если не задан параметр expires, то по истечении текущего сеанса работы Web-браузера cookies будут автоматически удалены;
□   expires указывает дату удаления cookies в следующем формате:
    Thu, 01 Jan 1970 00:00:01 GMT

 

Получить дату в этом формате можно с помощью методов setTime() и toGMTString() класса Date. Методу setTime() нужно передать текущее время в миллисекундах плюс время хранения cookies в миллисекундах. Текущее время можно получить с помощью метода getTime(). Рассчитать время хранения cookies можно исходя из следующих соотношений:
     •     1 секунда = 1000 миллисекунд;

     •     1 минута = 60 секунд = 60 000 миллисекунд;
     •     1 час = 60 минут = 3600 секунд = 3 600 000 миллисекунд;
     •     1 день = 24 часа = (24x3 600 000) миллисекунд = 86 400 000 миллисекунд.

 

Например:

   var d = new Date();
   d.setTime(d.getTime()+3600000); // Задан 1 час
   var End_Date = d.toGMTString(); // Дата удаления cookies


□    domain=<Имя домена> задает доменную часть URL-адреса, для которой действует данный cookies;
□    path=<Путь> задает часть URL-адреса, определяющую путь к документам, для которых действует данный cookies.

 

Считывание  cookies   производится   с   помощью   свойства  cookie   объекта document:

   var cookies = document.cookie;

Переменная cookies будет содержать строку, в которой перечислены все установленные пары имя=значение через точку с запятой:
"имя1=значение1;  имя2=значекие2"

 

Для удаления cookies следует установить cookies с прошедшей датой.
В качестве примера сохраним имя и фамилию пользователя, и при следующем посещении будем приветствовать его, используя сохраненные данные (листинг 66). Добавим также возможность удаления cookies. Для совместимости закодируем введенные данные с помощью метода escape(), а при выводе раскодируем их с помощью метода unescape(). Это позволяет безопасно сохранять значения, введенные кириллицей.

 

Листинг 66. Установка и удаление cookies


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Установка и удаление cookies</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_cookies() {
   if (navigator.cookieEnabled) {
      var text1 = document.getElementById("txt1");
      var text2 = document.getElementById("txt2");
      if (text1.value != "" && text2.value != "") {
         var d = new Date();
         d.setTime(d.getTime()+3600000); // Задан 1 час
         var End_Date = d.toGMTString(); // Дата удаления cookies
         var Str = "name1=" + escape(text1.value);
         Str += "; expires=" + End_Date + ";";
         document.cookie = Str;
         Str = "name2=" + escape(text2.value);
         Str += "; expires=" + End_Date + ";";
         document.cookie = Str;
         text1.value = "";
         text2.value = "";
         f_load();
      }
      else {
         window.alert("Не заполнено обязательное поле");
      }
   }
}
function f_cookies_del() {
   if (navigator.cookieEnabled) {
      if (document.cookie != "") {
         var d = new Date();
         d.setTime(1000); // Дата в прошлом
         var End_Date = d.toGMTString();
         document.cookie = "name1=; expires=" + End_Date + ";";
         document.cookie = "name2=; expires=" + End_Date + ";";
         f_load();
      }
   }
}
function f_load() {
   if (navigator.cookieEnabled) {
      var div1 = document.getElementById("div1");
      if (document.cookie != "") {
         var arr1, arr2;
         var obj = {};
         var Str = document.cookie;
         if (Str.indexOf("; ") != -1) {
            arr1 = Str.split("; ");
            for (var i=0, c=arr1.length; i<c; i++) {
               arr2 = arr1[i].split("=");
               obj[arr2[0]] = arr2[1];
            }
         }
         else {
            arr2 = Str.split("=");
            obj[arr2[0]] = arr2[1];
         }
         Str = "Привет, " + unescape(obj.name2).replace("<", "&lt;");
         Str += " " + unescape(obj.name1).replace("<", "&lt;");
         div1.innerHTML = Str;
      }
      else div1.innerHTML = "";
   }
}
//-->
</script>
</head>
<body onload="f_load();">
<div id="div1"></div>
<div>
Введите ваше имя:<br>
<input type="text" id="txt1"><br>
Введите вашу фамилию:<br>
<input type="text" id="txt2"><br>
<input type="button" value="Сохранить" onclick="f_cookies();"><br>
<input type="button" value="Удалить cookies" onclick="f_cookies_del();">
</div>
</body>
</html>

 

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити