Учебники

ES6 — Печенье

Декабрь 28, 2018

Веб-браузеры и серверы используют протокол 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.

пример 

<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" onclick = "WriteCookie();"/> 
      </form> 
   </body> 
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

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

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

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

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

пример 

<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 месяц.

пример 

<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 = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Удаление Cookie

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

пример 

<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 = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

47
Share: