Introdução aos Cookies: Compreendendo e Trabalhando com Cookies JavaScript

Preslav Dobrev2022-10-25 · 8 min read

Introdução aos Cookies: Compreendendo e Trabalhando com Cookies JavaScript

Cookies do navegador, ou cookies HTTP, são arquivos de texto compostos por pequenos fragmentos de dados. Os sites usam essas informações para rastrear a jornada do usuário, permitindo-lhes oferecer recursos personalizados e melhorar sua experiência de navegação. Os cookies podem armazenar até 4096 bytes de dados. No entanto, podemos adicionar um número limitado de cookies por domínio, dependendo do navegador.

Uma compreensão básica de cookies HTTP é essencial para qualquer usuário da internet, quer você esteja apenas navegando por diversão ou ganhando a vida com isso. Este guia irá apresentar os cookies e seus vários tipos em detalhes. Nosso foco é ajudar você a entender e trabalhar com Cookies JavaScript.

Vamos começar!

Pré-requisitos

Para acompanhar este tutorial, você deve ter:

Uma compreensão básica de JavaScript.

Primeiros passos com Cookies JavaScript

Trabalhar com cookies JavaScript é simples. Permite criar, editar e recuperar cookies sem esforço. Além disso, podemos usar a propriedade cookie do objeto Document para manipular e restringir propriedades de cookies como nome, valor e comprimento, para citar alguns.

Tipos de Cookies

Primeiro, vamos dar uma olhada nos diferentes tipos de cookies:

Cookies primários

Esses cookies são criados e armazenados toda vez que um usuário visita um site. Eles permitem que os proprietários de sites obtenham informações detalhadas sobre os dados dos usuários e lhes proporcionem uma melhor experiência de navegação.

Cookies persistentes

Para esse tipo de cookie, o emissor atribui uma data de expiração. Portanto, ele é usado por um período de tempo muito mais longo. Isso significa que, mesmo se você fechar o navegador, o cookie permanecerá nele. Além disso, os dados são retornados ao emissor cada vez que você visita o site que criou o cookie.

Cookies de sessão

Esses cookies são apenas temporários e serão armazenados na memória do seu navegador enquanto ele estiver aberto. Quando você o fecha, o cookie é removido do histórico do seu navegador, tornando-os um risco de segurança menor. Você não precisa especificar uma data de expiração.

Cookies de terceiros

Os cookies de terceiros são criados por um site que você não está visitando no momento. Na maioria das vezes, esses cookies são úteis para rastrear um usuário que clicou em um anúncio, associando-o ao domínio que o indicou.

Criando Cookies

Podemos criar cookies usando dois métodos:

Enviar Set-Cookie no cabeçalho de resposta HTTP. Dependendo das tecnologias usadas no servidor web, você pode gerenciar os cabeçalhos de cookies usando ferramentas e bibliotecas. Os cookies podem conter informações como uma data de expiração e recursos de segurança, como a diretiva secure e a flag HttpOnly.

HttpOnly: Indica que o navegador não pode ler ou modificar cookies.
Secure: Indica que o cookie só pode ser enviado por HTTPS.

Usando a propriedade document.cookie do JavaScript, podemos criar, ler e excluir cookies.

Passo 1 — Criando um Cookie

A seguir, demonstraremos o processo de criação de um cookie JavaScript. Os cookies são salvos no formato de par nome-valor:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

No cookie acima, UserName é o nome do cookie, enquanto CloudSigma é o valor armazenado nele.

O cookie tem uma data de expiração. Por padrão, ele é excluído automaticamente ao fechar o navegador. Você também pode adicionar uma data de expiração ao seu cookie:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Por padrão, os cookies pertencem à página atual. No entanto, também podemos especificar o cookie com a ajuda do parâmetro path:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs Cookie Expire

Dependendo das suas necessidades, você pode usar essas duas estratégias para definir a data de expiração de um cookie. A diferença entre as duas é que expires define uma data de expiração para quando um cookie é excluído. Pelo contrário, o max-Age define o tempo em segundos em que um cookie será excluído. Infelizmente, max-age não é suportado por todos os navegadores.

Exemplo de definição de um cookie usando expires e max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // em milissegundos
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // em milissegundos

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Step 2 — Reading a Cookie

O atributo document.cookie retorna uma string. Se houver dois ou mais cookies, usamos um ponto e vírgula ( ;) e espaço para separá-los.

Usamos o método split() para extrair um cookie individual de uma lista de cookies. Este método divide a lista em pares individuais de nomes e valores. Uma vez feito isso, você pode pesquisar pelo cookie de destino que deseja ler:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Bem-vindo novamente, " + UserName);
} else {
    firstName = prompt("Insira seu UserName:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Bem-vindo novamente, " + UserName);

} else {

firstName = prompt("Insira seu UserName:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Vamos entender as funções que criamos no código:

Nome da Função	Descrição
setCookie()	Cria um cookie
getCookie()	Lê o valor do cookie
checkCookie()	Verifica se o UserName está definido ou não.

No próximo passo, aprenderemos como atualizar um cookie.

Passo 3 — Atualizar um Cookie

Podemos definir novos valores para os atributos do nosso cookie. No nosso exemplo, vamos atualizar a assinatura do usuário de plano mensal para plano trimestral.

Vamos atualizar o atributo max-age do cookie UserName de 30 dias para 180 dias:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Passo 4 — Excluir um Cookie

Definir novamente o cookie com o mesmo nome excluirá o cookie que você deseja apagar. Podemos excluir um cookie definindo o atributo max-age para 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Além disso, se o cookie tiver um caminho especificado, exclua-o especificando-o:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Conclusão

Os cookies são necessários para que um site funcione corretamente. Neste tutorial introdutório, discutimos detalhadamente os cookies e seus diferentes tipos. Além disso, aprendemos a trabalhar com cookies com a ajuda de um exemplo. Agora que você se sente confortável usando cookies JavaScript, comece a criar cookies personalizados para aprender e explorar mais sobre o assunto.

Além disso, existem muitos tutoriais sobre JavaScript e desenvolvimento web que você pode explorar em nosso blog:

Feliz computação!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev é um designer criativo na CloudSigma, focado na construção de uma identidade empresarial consistente por meio de canais de marketing tradicionais e inovadores. Ele é hábil em combinar a visão artística com o marketing estratégico para criar narrativas de marca impactantes.