Cookies JavaScript

Índice

    Mostrar índice

Os cookies permitem armazenar informações do usuário em páginas da web.

O que são biscoitos?

Cookies são dados armazenados em pequenos arquivos de texto no seu computador.

Quando um servidor web envia uma página web para um navegador, a conexão é desliga e o servidor esquece tudo sobre o usuário.

Os cookies foram inventados para resolver o problema "como lembrar informações sobre o usuário":

  • Quando um usuário visita uma página web, seu nome pode ser armazenado em um cookie.

  • Na próxima vez que o usuário visitar a página, o cookie “lembra” seu nome.

Os cookies são salvos em pares nome-valor como:

username = John Doe

Quando um navegador solicita uma página web de um servidor, os cookies pertencentes à página são adicionados à solicitação. Desta forma o servidor obtém os dados necessários para "lembrar" informações sobre os usuários.

Nenhum dos exemplos abaixo funcionará se o seu navegador estiver com o suporte a cookies locais desativado.

Crie um cookie com JavaScript

JavaScript pode criar, ler e excluir cookies com o document.cookie propriedade.

Com JavaScript, um cookie pode ser criado assim:

document.cookie = "username=John Doe";

Você também pode adicionar uma data de validade (no horário UTC). Por padrão, o cookie é excluído quando o navegador é fechado:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Com um parâmetro path, você pode informar ao navegador a qual caminho o cookie pertence. Por padrão, o cookie pertence à página atual.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Leia um cookie com JavaScript

Com JavaScript, os cookies podem ser lidos assim:

let x = document.cookie;

document.cookie retornará todos os cookies em uma string, como: cookie1=value; cookie2=valor; cookie3=valor;

Alterar um cookie com JavaScript

Com JavaScript, você pode alterar um cookie da mesma forma que o cria:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

O cookie antigo foi substituído.

Exclua um cookie com JavaScript

Excluir um cookie é muito simples.

Você não precisa especificar um valor de cookie ao excluir um cookie.

Basta definir o parâmetro expires para uma data passada:

document.cookie = "username=; expires=Thu, 01 
Jan 1970 00:00:00 UTC; path=/;";

Você deve definir o caminho do cookie para garantir a exclusão do cookie correto.

Alguns navegadores não permitem excluir um cookie se você não especificar o caminho.

A sequência de biscoitos

A propriedade document.cookie se parece com uma string de texto normal. Mas não é.

Mesmo se você escrever uma string inteira de cookie em document.cookie, ao lê-la novamente, você só poderá ver o par nome-valor dele.

Se você definir um novo cookie, os cookies mais antigos não serão substituídos. O novo cookie é adicionado a document.cookie, então se você ler document.cookie novamente você obterá algo como:

cookie1=valor; cookie2=valor;

Se você quiser encontrar o valor de um cookie especificado, você deve escrever um JavaScript função que procura o valor do cookie na string do cookie.

Exemplo de cookie JavaScript

No exemplo a seguir criaremos um cookie que armazena o nome de um visitante.

Na primeira vez que um visitante chega à página web, será solicitado que ele preencha seu nome. O nome é então armazenado em um cookie.

Na próxima vez que o visitante chegar à mesma página, receberá uma mensagem de boas-vindas.

Para o exemplo, criaremos 3 funções JavaScript:

  1. Uma função para definir um valor de cookie

  2. Uma função para obter um valor de cookie

  3. Uma função para verificar o valor de um cookie

Uma função para definir um cookie

Primeiro, criamos uma função que armazena o nome do visitante em uma variável cookie:

Exemplo

function setCookie(cname, cvalue, exdays) {
   const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Exemplo explicado:

Os parâmetros da função acima são o nome do cookie (cname), o valor do cookie (cvalue) e o número de dias até o cookie expirar (exdays).

A função define um cookie adicionando o cookiename, o cookie valor e a string expira.

Uma função para obter um cookie

Em seguida, criamos uma função que retorna o valor de um cookie especificado:

Exemplo

function getCookie(cname) {
   
let name = cname + "=";
   
let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
      let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
      
 }
      if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
      }
    }
    return "";
}

Função explicada:

Tome o cookiename como parâmetro (cname).

Crie uma variável (nome) com o texto a ser pesquisado (cname + "=").

Decodifique a string do cookie para lidar com cookies com caracteres especiais, por exemplo. '$'

Divida document.cookie por ponto e vírgula em uma matriz chamada ca (ca = decodedCookie.split(';')).

Faça um loop pela matriz ca (i=0; i < ca.length; i++) e leia cada valor c=ca[i]).

Se o cookie for encontrado (c.indexOf(name) == 0), retorne o valor do cookie (c.substring(nome.comprimento, c.comprimento).

Se o cookie não for encontrado, retorne "".

Uma função para verificar um cookie

Por último, criamos a função que verifica se um cookie está definido.

Se o cookie estiver definido, ele exibirá uma saudação.

Se o cookie não estiver definido, ele exibirá uma caixa de aviso solicitando o nome do usuário, e armazena o cookie do nome de usuário por 365 dias, chamando a função setCookie:

Exemplo

function checkCookie() {
  let 
username = getCookie("username");
  if (username != "") {
     alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
      if (username != "" 
&& username != null) {
        setCookie("username", username, 365);
      }
  }
}

Todos juntos agora

Exemplo

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
   
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + 
";" + expires + ";path=/";
}
function getCookie(cname) {
  let name = cname + "=";
    let ca 
= document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) 
{
    
let c = ca[i];
    while (c.charAt(0) == ' 
') {
      c = c.substring(1);
    }
    if (c.indexOf(name) 
 == 0) {
      return c.substring(name.length, c.length);
      }
  }
    return "";
}
function 
checkCookie() {
  let user = getCookie("username");
  if (user != "") 
{
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
      if (user != "" && 
user != null) {
      setCookie("username", user, 365);
      }
  }
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

O exemplo acima executa a função checkCookie() quando a página é carregada.