Учебники

JavaScript и файлы cookie

Январь 22, 2019

Веб-браузеры и серверы используют протокол HTTP для связи, а HTTP — это протокол без сохранения состояния. Но для коммерческого веб-сайта требуется хранить информацию о сеансе на разных страницах. Например, регистрация одного пользователя заканчивается после заполнения множества страниц. Но как сохранить информацию о сессиях пользователей на всех веб-страницах.

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

Как это устроено ?

Ваш сервер отправляет некоторые данные в браузер посетителя в виде файла cookie. Браузер может принять куки. Если это так, он сохраняется в виде простой текстовой записи на жестком диске посетителя. Теперь, когда посетитель заходит на другую страницу вашего сайта, браузер отправляет тот же файл cookie на сервер для поиска. После получения ваш сервер знает / запоминает то, что было сохранено ранее.

Cookies — это запись данных в виде простого текста из 5 полей переменной длины —

  • Истекает — дата окончания срока действия куки. Если это поле пустое, срок действия файла cookie истечет, когда посетитель выйдет из браузера.

  • Домен — доменное имя вашего сайта.

  • Путь — путь к каталогу или веб-странице, на которой установлен файл cookie. Это может быть пустым, если вы хотите получить куки из любого каталога или страницы.

  • Безопасный — если в этом поле содержится слово «безопасный», то файл cookie может быть получен только с безопасного сервера. Если это поле пустое, такого ограничения не существует.

  • Имя = Значение — файлы cookie устанавливаются и извлекаются в форме пар ключ-значение.

Истекает — дата окончания срока действия куки. Если это поле пустое, срок действия файла cookie истечет, когда посетитель выйдет из браузера.

Домен — доменное имя вашего сайта.

Путь — путь к каталогу или веб-странице, на которой установлен файл cookie. Это может быть пустым, если вы хотите получить куки из любого каталога или страницы.

Безопасный — если в этом поле содержится слово «безопасный», то файл cookie может быть получен только с безопасного сервера. Если это поле пустое, такого ограничения не существует.

Имя = Значение — файлы cookie устанавливаются и извлекаются в форме пар ключ-значение.

Cookies были изначально разработаны для программирования CGI. Данные, содержащиеся в cookie, автоматически передаются между веб-браузером и веб-сервером, поэтому сценарии CGI на сервере могут считывать и записывать значения cookie, которые хранятся на клиенте.

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

Хранение куки

Самый простой способ создать cookie — это присвоить строковое значение объекту document.cookie, который выглядит следующим образом. 

document.cookie = "key1 = value1;key2 = value2;expires = date";

Здесь атрибут expires необязателен. Если вы предоставите этому атрибуту правильную дату или время, срок действия файла cookie истечет в заданную дату или время, после чего значение файла cookie будет недоступно.

Примечание. Значения файлов cookie не могут содержать точку с запятой, запятую или пробел. По этой причине вы можете использовать функцию escape () JavaScript для кодирования значения перед его сохранением в файле cookie. Если вы сделаете это, вам также придется использовать соответствующую функцию unescape () при чтении значения cookie.

пример

Попробуйте следующее. Устанавливает имя клиента во входном куки.

Live Demo 

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               if( document.myform.customer.value == "" ) {
                  alert("Enter some value!");
                  return;
               }
               cookievalue = escape(document.myform.customer.value) + ";";
               document.cookie = "name=" + cookievalue;
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>      
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
      </form>   
   </body>
</html>

Выход

Теперь на вашем компьютере есть файл cookie с именем name . Вы можете установить несколько файлов cookie, используя несколько пар ключ = значение, разделенных запятой.

Чтение файлов cookie

Чтение cookie-файла так же просто, как и его запись, потому что значением объекта document.cookie является cookie-файл. Таким образом, вы можете использовать эту строку всякий раз, когда вы хотите получить доступ к cookie. Строка document.cookie будет содержать список пар имя = значение, разделенных точками с запятой, где имя — это имя файла cookie, а значение — его строковое значение.

Вы можете использовать функцию split () для разбивки строки на ключ и значения следующим образом:

пример

Попробуйте следующий пример, чтобы получить все куки.

Live Demo 

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("All Cookies : " + allcookies );
               
               // Get all the cookies pairs in an array
               cookiearray = allcookies.split(';');
               
               // Now take key value pair out of this array
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>      
   </head>
   
   <body>     
      <form name = "myform" action = "">
         <p> click the following button and see the result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

Примечание. Здесь length — это метод класса Array, который возвращает длину массива. Мы обсудим Массивы в отдельной главе. К тому времени, пожалуйста, попробуйте переварить это.

Примечание. Возможно, на вашем компьютере уже установлены другие файлы cookie. Приведенный выше код отобразит все файлы cookie, установленные на вашем компьютере.

Установка даты истечения срока действия файлов cookie

Вы можете продлить срок действия файла cookie за пределы текущего сеанса браузера, установив дату окончания срока действия и сохранив дату окончания действия в файле cookie. Это можно сделать, установив для атрибута expires дату и время.

пример

Попробуйте следующий пример. В нем показано, как продлить срок действия файла cookie на 1 месяц.

Live Demo 

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() + 1 );
               cookievalue = escape(document.myform.customer.value) + ";"
               
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

Выход

Удаление Cookie

Иногда вы захотите удалить cookie, чтобы при последующих попытках чтения cookie ничего не возвращалось. Для этого вам просто нужно установить дату истечения времени в прошлом.

пример

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

43
Share: