Biscoitos em JavaScript: Exemplo de Definir, Obter e Excluir

O que são cookies?

Um cookie é um pequeno arquivo de dados armazenado no seu computador para ser acessado pelo seu navegador. Você pode ter se beneficiado dos cookies consciente ou inconscientemente. Já aconteceu de você permanecer conectado a um site como o Facebook para não precisar digitar seus dados toda vez que tenta fazer login? Se sim, você está usando cookies. Os cookies são salvos como pares de chave/valor.

Um esclarecimento importante: um cookie não armazena sua senha. Ele armazena um identificador de sessão, que é um token aleatório emitido pelo servidor após um login bem-sucedido. O servidor associa esse token à sua conta, portanto, a senha em si nunca sai do servidor.

Por que você precisa de um cookie?

A comunicação entre um navegador web e o servidor utiliza um protocolo sem estado chamado HTTP. Um protocolo sem estado trata cada requisição de forma independente. Portanto, o servidor não armazena os dados após enviá-los ao navegador. Mas, em muitas situações, os dados serão necessários novamente. É aí que entram os cookies. Com os cookies, o navegador não precisa se comunicar com o servidor sempre que os dados forem necessários. Em vez disso, eles podem ser obtidos diretamente do computador.

Os usos típicos incluem lembrar uma sessão iniciada, armazenar uma preferência de idioma ou tema, etc.ping itens em uma lojaping cesta entre páginas e contagem de visitantes novos versus visitantes recorrentes.

Javascript Definir cookie

Você pode criar cookies usando a propriedade document.cookie desta forma.

document.cookie = "cookiename=cookievalue"

Você pode até adicionar uma data de expiração ao seu cookie para que ele seja removido do computador na data especificada. A data de expiração deve ser definida no formato UTC/GMT. Se você não definir uma data de expiração, o cookie será removido quando o usuário fechar o navegador.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Você também pode definir o domínio e o caminho para especificar a qual domínio e a quais diretórios dentro do domínio específico o cookie pertence. Por padrão, um cookie pertence à página que o define.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//cria um cookie com o domínio da página atual e um caminho que abrange todo o domínio.

JavaScript Obter Cookie

Você pode acessar o cookie desta forma, que retornará todos os cookies salvos para o domínio atual.

var x =  document.cookie

O valor retornado é uma única string no formato name1=value1; name2=value2Não existe um método integrado para ler um cookie pelo nome, então a string precisa ser dividida. A função auxiliar abaixo retorna um único valor e uma string vazia quando o nome está ausente.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Saída:

Ann Smith
true

JavaScript Excluir Cookie

Para excluir um cookie, basta definir o valor do cookie como vazio e definir o valor de expiração para uma data que já tenha passado.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Um detalhe é a causa da maioria das falhas na exclusão de cookies. O navegador identifica um cookie pelo seu nome, juntamente com o caminho e o domínio, portanto, a instrução de exclusão deve repetir o mesmo caminho e domínio que foram usados ​​quando o cookie foi criado.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Atributos de Cookies Explicados

Cada atributo após o primeiro ponto e vírgula altera a duração do cookie, quais requisições o carregam e qual código pode lê-lo. A referência abaixo abrange todos eles.

O parâmetro SameSite merece atenção especial porque os navegadores agora aplicam um valor padrão. Os três valores aceitos se comportam da seguinte maneira.

• Rigoroso: O cookie nunca é enviado quando a solicitação se origina de outro site, o que é a configuração mais segura para sessões bancárias.
• Lax: O cookie acompanha a navegação de nível superior, como clicar em um link, mas não acompanha imagens ou frames de outros sites. Este é o comportamento padrão dos navegadores modernos.
• Nenhum: O cookie é enviado em todas as solicitações entre sites e deve ser combinado com o atributo Secure; caso contrário, o navegador o rejeita.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Experimente você mesmo este exemplo

O script abaixo combina as três operações. Ele cria um cookie com um prazo de validade medido em dias, lê o cookie pelo nome e saúda um visitante recorrente. Instruções especiais para fazer o código funcionar… Pressione o botão executar duas vezes.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Comportamento esperado:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code explicação: A função `createCookie` converte um número de dias em milissegundos e os adiciona à hora atual, resultando na data de expiração. A função `accessCookie` divide a string do cookie em pontos e vírgulas, remove os espaços em branco de cada fragmento e compara o início do fragmento com o nome solicitado. A função `checkCookie` une as duas informações ao carregar a página.

Cookies vs. armazenamento local vs. armazenamento de sessão

Os cookies não são o único lugar onde um navegador pode armazenar dados. Existem duas opções de armazenamento na Web, e escolher a correta evita o envio de bytes desnecessários em cada solicitação.

A regra prática é simples. Se o servidor precisar do valor, use um cookie. Se apenas a página precisar, use localStorage ou sessionStorage, pois esses valores nunca adicionam peso a uma requisição de rede.

O código de gerenciamento de cookies geralmente é compartilhado entre várias páginas, portanto, revise-o. interno e externo JavaScript antes de decidir onde colocá-lo. A divisão de cordas usada aqui se baseia em JavaCadeias de script e JavaMétodos de matriz de script, e outros scripts de trabalho aparecem no prático JavaExemplos de código de script.

Perguntas Frequentes