JavaScript e Cookies

O que são cookies?

Os navegadores e servidores da Web usam o protocolo HTTP para se comunicar e o HTTP é um protocolo sem estado. Mas para um site comercial, é necessário manter as informações da sessão entre as diferentes páginas. Por exemplo, o registro de um usuário termina após completar muitas páginas. Mas como manter as informações da sessão dos usuários em todas as páginas da web.

Em muitas situações, o uso de cookies é o método mais eficiente de lembrar e rastrear preferências, compras, comissões e outras informações necessárias para uma melhor experiência do visitante ou estatísticas do site.

Como funciona ?

Seu servidor envia alguns dados para o navegador do visitante na forma de um cookie. O navegador pode aceitar o cookie. Se isso acontecer, ele será armazenado como um registro de texto simples no disco rígido do visitante. Agora, quando o visitante chega a outra página do seu site, o navegador envia o mesmo cookie para o servidor para recuperação. Uma vez recuperado, seu servidor sabe / lembra o que foi armazenado anteriormente.

Cookies são um registro de dados de texto simples de 5 campos de comprimento variável -

Expires- A data em que o cookie irá expirar. Se estiver em branco, o cookie irá expirar quando o visitante sair do navegador.
Domain - O nome de domínio do seu site.
Path- O caminho para o diretório ou página da web que definiu o cookie. Isso pode ficar em branco se você quiser recuperar o cookie de qualquer diretório ou página.
Secure- Se este campo contiver a palavra "seguro", o cookie só poderá ser recuperado com um servidor seguro. Se este campo estiver em branco, não existe tal restrição.
Name=Value - Os cookies são definidos e recuperados na forma de pares de valores-chave

Os cookies foram originalmente projetados para programação CGI. Os dados contidos em um cookie são transmitidos automaticamente entre o navegador da web e o servidor da web, para que os scripts CGI no servidor possam ler e gravar valores de cookies armazenados no cliente.

JavaScript também pode manipular cookies usando o cookie propriedade do Documentobjeto. JavaScript pode ler, criar, modificar e excluir os cookies que se aplicam à página da web atual.

Armazenando Cookies

A maneira mais simples de criar um cookie é atribuir um valor de string ao objeto document.cookie, que se parece com isto.

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

Aqui o expiresatributo é opcional. Se você fornecer a este atributo uma data ou hora válida, o cookie irá expirar em uma determinada data ou hora e, a partir de então, o valor dos cookies não estará acessível.

Note- Os valores dos cookies não podem incluir ponto e vírgula, vírgula ou espaço em branco. Por este motivo, você pode querer usar o JavaScriptescape()função para codificar o valor antes de armazená-lo no cookie. Se você fizer isso, você também terá que usar o correspondenteunescape() função quando você lê o valor do cookie.

Exemplo

Experimente o seguinte. Ele define um nome de cliente em um cookie de entrada.

<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>

Resultado

Agora sua máquina tem um cookie chamado name. Você pode definir vários cookies usando vários pares de chave = valor separados por vírgula.

Lendo Cookies

Ler um cookie é tão simples quanto escrever um, porque o valor do objeto document.cookie é o cookie. Portanto, você pode usar essa string sempre que quiser acessar o cookie. A string document.cookie manterá uma lista de pares nome = valor separados por ponto-e-vírgula, ondename é o nome de um cookie e value é seu valor de string.

Você pode usar strings ' split() função para quebrar uma string em chave e valores da seguinte forma -

Exemplo

Tente o exemplo a seguir para obter todos os cookies.

<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>

Note - aqui length é um método de Arrayclasse que retorna o comprimento de uma matriz. Discutiremos os Arrays em um capítulo separado. Nesse momento, por favor, tente digeri-lo.

Note- Pode haver alguns outros cookies já configurados em sua máquina. O código acima exibirá todos os cookies definidos em sua máquina.

Definição da data de expiração dos cookies

Você pode estender a vida de um cookie além da sessão atual do navegador, definindo uma data de expiração e salvando a data de expiração dentro do cookie. Isso pode ser feito definindo o‘expires’ atribuir a uma data e hora.

Exemplo

Experimente o seguinte exemplo. Ele ilustra como estender a data de validade de um cookie em 1 mês.

<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>

Resultado

Excluindo um Cookie

Às vezes, você desejará excluir um cookie para que as tentativas subsequentes de ler o cookie não retornem nada. Para fazer isso, você só precisa definir a data de validade para uma hora no passado.

Exemplo

Experimente o seguinte exemplo. Ele ilustra como excluir um cookie definindo sua data de validade para um mês antes da data atual.

<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>

Resultado