As tão famosas notificações de cookies com as quais você é bombardeado todo dia e não pensa duas vezes em clicar no botão aceito, possuem muito mais a oferecer do que você pode imaginar a uma primeira vista. Mas quem pode julgar? Como não confiar de olhos fechados em algo que remete a uma fornada de biscoitos quentinhos?

Neste artigo, você saberá o que são os cookies, para que servem e além disso saberá como é o funcionamento com o JavaScript. Boa leitura!

Cookies: onde nasceram, como se comportam e para que servem

Os cookies foram criados em 1994 por Lou Montulli, a ideia era criar algo que desse aos sites algum tipo de memória que fosse suficiente para que ao recarregar sua página, os dados não fossem perdidos.

Ilustrativamente, as três funcionalidades principais do uso de cookies são:

  • Vigia da sessão: armazenamento de atividade, como um carrinho de compras;
  • Stylist particular: armazenamento de preferências, como temas;
  • GPS Virtual: armazenamento do histórico do usuário para análise de comportamento, como armazenar o que você andou pesquisando em sites de buscas na web.

Atualmente, existem outras formas de armazenamento de informações do lado do cliente, como a Web Storage API (localStorage e sessionStorage), mas os cookies foram os precursores dessa realização.

O que são cookies, afinal?

Cookies web ou Cookies HTTP, são pequenos trechos de dados em formato de texto que o servidor injeta no navegador, dando-lhe a possibilidade de armazenar essas informações por um determinado período de tempo de forma persistente.

Pense neles como algo que você comprou ou criou para facilitar sua vida e sabe que precisará em um futuro próximo, como por exemplo uma lista de compras que você faz em casa e consulta ao chegar ao mercado. Sendo assim, você guarda  em um lugar no qual sempre vai estar acessível, como sua carteira ou sua bolsa, para que quando o momento de usar chegar, esteja sempre em mãos.

Relacionamento com Javascript

Os cookies podem ser criados usando JavaScript e caso o HttpOnly não esteja configurado, eles também podem ser acessados usando Javascript por meio da propriedade document.cookie. O HttpOnly é um atributo que não permite que os cookies fiquem acessíveis para a API Javascript, mas apenas para o servidor.

CRUD com Javascript

Para os não familiarizados com o conceito de CRUD, aí vai uma oportunidade de aprender mais uma coisa.

C - create

Você pode criar ou escrever um cookie alterando o nome e o valor guardados na propriedade document.cookie, em um padrão "name=value".

Exemplo:

document.cookie = "name=Maria";

Existem outros valores que você pode setar em um cookie, como o path, o domínio, a data de expiração e o nível de segurança.

  • o path = torna o cookie acessível a todas as páginas sob esse caminho. Caso não seja definido, ele pega o path atual como padrão.

document.cookie = "name=Maria; path=/home;"

  • o domínio = mantêm o cookie acessível em um domínio ou subdomínios dele, caso você defina. Caso você não defina, ele pega o domínio atual como padrão.

name=Maria; domain=maria.com;

  • a data de expiração = indica a data e hora em que o cookie deve expirar, para isso pode-se setar duas propriedades, o “expires”, no formato do fuso horário GMT, ou o “max-age”, em segundos a partir do momento atual. Caso você não defina nenhuma das duas, o cookie desaparecerá quando o navegador for fechado. Outra observação é que se você definir uma data no passado, ou o “max-age” como zero ou um valor negativo, o cookie será excluído automaticamente.

Exemplo 1:

document.cookie = "name=Maria; expires=Tue, 16 Set 2050 00:00:00 GMT"

Exemplo (válido por + 1 hora a partir do momento atual):

document.cookie = "name=Maria; max-age=3600"

  • a segurança = indica se o cookie deve ser transferido apenas por HTTPS. Por padrão, os cookies não distinguem protocolos porque são baseados no domínio, assim, aparecem tanto em sites com o protocolo HTTP, quanto os com protocolo HTTPS.

Exemplo:

document.cookie = "name=Maria; secure"

É necessário ter atenção, pois só é possível armazenar cerca de 20 cookies por domínio (isso pode variar dependendo do navegador).

R - read

A leitura dos cookies armazenados pode ser feita por meio da propriedade document.cookie. Ela fornecerá todos os cookies armazenados em um par nome=valor e separados por ";".

Exemplo:

alert(document.cookie);
// cookies1=value1; cookie2=value2...

U - update

Os cookies podem ser atualizados da mesma maneira que foram criados, só deve obedecer o mesmo domínio e caminho, o mesmo ocorre para deleção.

Exemplo:

document.cookie = "name=Maria; max-age=3600; secure"

D - delete

A maneira mais simples de se deletar um cookie é atualizar a sua data de expiração para um valor negativo.

Exemplo:

document.cookie = "name=Maria; max-age=-1"

Importante avisar, antes que você termine esse artigo, que não dá para transmitir vírus por meio dos cookies, porque eles são arquivos muito pequenos (até 4kb). E agora que você já conhece mais de perto o potencial desses super biscoitos, pode ficar mais à vontade com a companhia deles em seus passeios pela internet.

Fique sempre atento a necessidade dos cookies que você aceita para determinado app ou página web. Opte sempre por ter mais transparência quanto a utilidade final das informações colhidas.

Caso queira saber mais sobre Cookies Web ou outros assuntos sobre tecnologia, inscreva-se na nossa newsletter.