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>