ES6 - Cookies
Os navegadores e servidores da Web usam o protocolo HTTP para se comunicar. O HTTP é um protocolo sem estado, ou seja, ele não mantém os dados do cliente em várias solicitações feitas pelo cliente. Este ciclo completo de solicitação-resposta entre o cliente e o servidor é definido como umsession. Os cookies são o mecanismo padrão usado pelos navegadores para armazenar dados relativos à sessão de um usuário.
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 registros 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 define o cookie. 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 lado do cliente.
JavaScript também pode manipular cookies usando a propriedade cookie do objeto Document. 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 document.cookie objeto, que se parece com isto.
"document.cookie = "key1 = value1; key2 = value2; expires = date";
Aqui, o atributo 'expira' é opcional. Se você fornecer a este atributo uma data ou hora válida, o cookie irá expirar na data ou hora fornecida 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
<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>
A seguinte saída é exibida na execução bem-sucedida do código acima.
Agora sua máquina tem um cookie chamado nome. 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 document.cookieobjeto é o cookie. Portanto, você pode usar essa string sempre que quiser acessar o cookie. odocument.cookie string manterá uma lista de pares nome = valor separados por ponto e vírgula, onde o nome é o nome de um cookie e o valor é seu valor de string.
Você pode usar strings ' split() função para quebrar uma string em chave e valores, conforme mostrado no exemplo a seguir.
Exemplo
<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 da classe Array que retorna o comprimento de uma matriz.
Pode haver alguns outros cookies já configurados em sua máquina. O código acima exibirá todos os cookies definidos em sua máquina.
A seguinte saída é exibida na execução bem-sucedida do código acima.
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 validade e salvando a data de validade dentro do cookie. Isso pode ser feito definindo o atributo 'expires' para uma data e hora. O exemplo a seguir ilustra como estender a data de expiração de um cookie em 1 mês.
Exemplo
<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>
A seguinte saída é exibida na execução bem-sucedida do código acima.
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. O exemplo a seguir ilustra como excluir um cookie definindo sua data de validade para um mês antes da data atual.
Exemplo
<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>
A seguinte saída é exibida na execução bem-sucedida do código acima.