Cookies em JavaScript! Entenda de uma vez

1. Encontre seu código
›
2. JavaScript
›
3. Cookies em JavaScript! Entenda de uma vez

---

Cookies em JavaScript são muito eficientes para guardarmos informações no navegador do usuário.
Os cookies nada mais são do que informações armazenadas no navegador com uma data de expiração.

Veja a aula em vídeo:

Cookies JavaScript são úteis?

Sim, bastante, porém, dependendo do que você desejar armazenar e como é armazenado. Imagine que você quer que quando alguém passe na sua mesa do escritório, se lembre de certas informações, então, você escreve essas informações em um papel e deixa ele na mesa.
Assim a primeira coisa que uma pessoa irá ver quando se aproximar da sua mesa, será o papel com as instruções.

Essa é a função do Cookie, sempre que uma pessoa acessar seu site, você pode carregar uma informação útil já armazenada no computador da pessoa.

Nota: Essas informações já devem ter sido armazenadas em Cookies JavaScript

Cookies JavaScript são seguros?

O Cookie apenas armazena uma informação. Se você desejar colocar um texto legível, ele irá armazenar isso, se você colocar uma informação criptografada, então será mais seguro.

Aprendendo Cookies no JavaScript

Agora vamos começar a aprender a como programar Cookies e manipulá-los no JavaScript

Explicação em vídeo:

1 – Testando se os cookies estão ativos no navegador

Antes de qualquer código, precisamos averiguar se os Cookies JavaScript estão ativos no navegador, pois, caso não estejam, precisamos fazer outra ação relevando os Cookies.

Para testar se os cookies estão ativos, você pode usar a função cookieEnabled:

A função cookieEnabled esta contida no objeto navigator, ou seja, navigator.cookieEnabled

Se você não entendeu o parágrafo acima, ou não sabe o que são objetos no JavaScript, escrevemos um artigo excelente sobre isso: Aprenda Objetos no JavaScript.

if(navigator.enabledCookie)
{
   // cookies estão ativos
}

Apesar de todos navegadores possuírem cookies, é interessante você saber que essa função não existe em browsers antigos.

Dica sobre Cookies ativos e desativados

Recomendamos fazer uma função para cada , ou seja, uma para cookies ativos e outra para quando o navegador não tiver ele ativo. Exemplo:

function cookiesEnabled()
{
   //Faz o salvamento ou tratamento de dados dos cookies
}

function cookiesDisabled()
{
   //Faz o salvamento ou tratamento de dados sem precisar dos cookies
}
if(navigator.enabledCookie)
{
   cookiesEnabled();
}else{
   cookiesDisabled();
}

Adicionando e configurando Cookies

Um Cookie em JavaScript precisa ter:

• Um nome.
• Um valor.
• Uma data de expiração (data que será automaticamente apagado).
• Um caminho (Qual página do site que o criou).

Logo para criar o cookie, vamos acessar a propriedade document e incrementar a propriedade filha cookie:

document.cookie += "nome_do_cookie" + "=" + "valor_do_cookie;" + "expires" + (new Date(Date.now() + 60000)).toUTCString() + ";path=https://encontreseucodigo.com.br";
//Essa data + 60000 é para o cookie expirar daqui a 1 minuto, pois, 60000 é um minuto.

Perceba que o Cookie é incrementado, pois, não desejamos apagar outros dados do navegador que são pertinentes. Logo, precisamos incrementá-lo sempre para salva-lo.

Outra maneira de incrementara strings em JavaScript é usar o template string, que nada mais é do que fazer o incremento de strings de uma maneira mais legível.

const nome_do_cookie = 'nomeDoCookie';
const valor_do_cookie = 'valorDoCookie';
const data_expiracao_do_cookie = (new Date(Date.now() + 60000)).toUTCString();
const nome_do_cookie = 'nomeDoCookie';
let newCookie = `
     ${nome_do_cookie}=${valor_do_cookie};
     expires=${data_expiracao_do_cookie};
     path=https://encontreseucodigo.com.br
`;
document.cookie += nome_do_cookie;

Pronto, você decide como quer declarar o seu cookie e como guardar informações no cookie do navegador com javascript.

Lendo os Cookies em JavaScript

Quando digitarmos document.cookie seu navegador irá imprimir todos os Cookies que declaramos anteriormente, desde que não tenha expirado o tempo em que declaramos (lembra dos 60000 milisegundos a mais?).

Vamos aprendar a como pegar o valor de um cookie no javascript.

Mas em nossa aplicação precisamos sempre precisamos separar os dados do cookie para trabalharmos os que são do nosso interesse.

• Verificamos se a string retornada por document.cookies possui o nome do nosso cookie.
• Quebramos nosso cookie em array para obter o valor desejado.

Há várias maneiras de se fazer isso, podemos quebrar pelo ; e depois pegar cada linha e quebrar pelo =.
Assim teremos os pares e valores. Porém, não precisamos quebra a string inteira, já que nós já temos em mente o que desejamos.

Logo podemos quebrá-la apenas no nome do nosso Cookie, assim, iremos já otimizar nossa busca e poupar memória ram.

let recuperandoCookie = document.cookie.split(nome_do_cookie+"=")[1];
// Colocamos o = no final por que sabemos que a string contém o nome_do_cookie=
//A string será quebrada em duas partes, a primeira no índice 0 será a que não importa, já a segunda, terá o valor que desejamos;
let valorDesejado = recuperandoCookie.split(';')[0];

Veja como é menos código e mais objetivo:

• Quebramos o cookie no nome em que desejamos recuperar.
• Recuperamos o valor do cookie indo diretamente para o 2° índice, e quebrando a string e recuperando o 1° valor.

Removendo Cookies JavaScript

Os Cookies em JavaScript são removidos automaticamente por causa da sua data de expiração.
Lembra do parâmetro expire?
Então se desejarmos excluir aquele Cookie, é só declararmos ele novamente com uma data de expiração menor que a atual.

document.cookie += "nome_do_cookie" + ";" + "expires" + (new Date(Date.now() - 60000)).toUTCString() + ";path=https://encontreseucodigo.com.br";
//Essa data + 60000 é para o cookie expirar pois, -60000 é um minuto a menos.

Perceba que declaramos o cookie com 1 minuto a menos que a data atual.

• O Cookie deve conter o mesmo endereço informado no parâmetro path.
• O Cookie precisa ter o mesmo nome do Cookie original.

Dicas sobre declarações de Cookies em JavaScript

Os Cookies só devem ser criptografados caso aja alguma informação sigilosa ou pertinente, como e-mail, cpf, senhas, tokens ou algum parâmetro que seja usado para referenciar algo na programação, como alguma promoção, preços e etc.

Sempre coloque em Cookie dados que não sejam de importância vital para o software, como exemplo dados de acesso ao banco de dados ou algum dado que possa causar um vazamento de dados sigilosos.

Exemplos de usos

Para você imaginar um Cookie, você pode pensar em situações como armazenar a visita e o clique no botão de quero comprar mas sem finalizar o pagamento. Dessa maneira estamos adicionando informações da compra no cookie javascript.

Há muitos exemplos, isso dependerá de sua criatividade.

Cookies são úteis, mas, agora iremos ver algo muito útil também e que nos navegadores temos bastante, que são as Web Storages.