JavaScript и Cookies

: Категория: JavaScript; Опубликовано: 14 сентября 2018; Просмотров: 8764

javascript

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

Содержание:

Что такое Cookies?
Как это работает?
Сохранение файлов cookie
Чтение файлов cookie
Настройка даты истечения срока действия Cookies
Удаление файла cookie

Что такое Cookies?

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

Как это работает?

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

Файлы cookie представляют собой запись текстовых данных из 5 полей переменной длины -

expires - дата истечения срока действия файла cookie. Если это пустое, cookie истечет, когда посетитель покинет браузер.
domain - доменное имя вашего сайта.
path - путь к каталогу или веб-странице, в которой установлен файл cookie. Это может быть пустым, если вы хотите получить файл cookie из любого каталога или страницы.
secure. Если это поле содержит слово «безопасно», cookie может быть восстановлен только с защищенного сервера. Если это поле пустое, таких ограничений не существует.
Name = Value - Cookies устанавливаются и извлекаются в виде пар ключ-значение

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

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

Сохранение файлов cookie

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

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

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

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

пример

Попробуйте следующее. Он задает имя клиента во входном 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 Cookie" onclick="WriteCookie();"/>
      </form>
  
   </body>
</html>

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

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

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

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

пример

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

<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, установленные на вашем компьютере.

Настройка даты истечения срока действия Cookies

Вы можете продлить срок действия файла 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="myform" action="">
         Enter 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="myform" action="">
         Enter name: <input type="text" name="customer"/>
         <input type="button" value="Set Cookie" onclick="WriteCookie()"/>
      </form>
     
   </body>
</html>

JavaScript и Cookies

Что такое Cookies?

Как это работает?

Сохранение файлов cookie

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

Настройка даты истечения срока действия Cookies

Удаление файла cookie

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи