O Que São Cookies e Como Trabalhar com Eles Usando JavaScript

? ? ? não exatamente… ??? Melhor! O cookie ? é um dos emojis favoritos da web e também uma das tecnologias mais importantes da web.

Vamos dar uma olhada no que isso tudo significa, certo?

Os Conceitos Básicos dos Cookies do Navegador

Os cookies do navegador foram introduzidos na web para manter informações persistentes sobre o usuário. O primeiro caso de uso foi verificar se um usuário já havia visitado o site da Netscape.

Os cookies são strings que têm um campo de nome, um campo de valor e atributos adicionais opcionais. Os valores são strings e você pode armazenar o que considerar melhor para sua aplicação. O cookie _ga do Google Analytics é provavelmente um dos || o mais comum lá fora, geralmente se parece com isso:

• Nome: _ga
• Valor: GA1.3.210706468.1583989741
• Domínio: .exemplo.com
• Caminho: /
• Expira / Tempo Máximo: 2022-03-12T05:12:53.000Z

Os cookies podem armazenar até 4096 bytes de dados (isso inclui nome, valor, domínio, data de expiração e o que mais você puder colocar lá). Você pode adicionar um número limitado de cookies por domínio, o que varia dependendo do seu navegador.

Como São Criados os Cookies

Há duas maneiras principais de criar cookies:

• Com HTTP, você pode enviar Set-Cookie no cabeçalho de resposta HTTP. Dependendo das tecnologias que você está utilizando para o seu servidor web, você pode usar diferentes ferramentas e bibliotecas para gerenciar cabeçalhos de cookie. Essas ferramentas devem criar respostas HTTP que se parecerão aproximadamente com isto:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

Você pode adicionar informações aos seus cookies, como uma data de expiração e recursos de segurança, como a diretiva Secure e a flag HttpOnly.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

A flag HttpOnly significa que os cookies não podem ser lidos ou modificados pelo navegador. E Secure significa que o cookie só pode ser transferido sobre HTTPS. Isso é realmente importante para proteger sua aplicação.

• Com Javascript, é um pouco mais complicado gerenciar Cookies. Temos uma interface, document.cookie, que armazena nossos cookies e pode ser reatribuída. Por exemplo, em um site que tem o Google Analytics instalado e no console do desenvolvedor, podemos fazer:

console.log(document.cookie)
// Regista algo como "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// Este sinal de igual não funciona como esperado
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// Regista "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Observe que o código anterior acrescenta o novo cookie que criamos

// Uma implementação básica de uma interface de cookie pode parecer com isto:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// Para uma atualização real, primeiro verificaríamos se o cookie existe
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

Tipos de Cookies

Cookies de sessão

Os cookies de sessão geralmente se referem a um tipo de cookie que existe até o navegador ser fechado. Para configurar um cookie de sessão, basta NÃO especificar qualquer data de expiração.

Por exemplo, você pode armazenar o nome do usuário no cookie. Quem tiver acesso ao cookie terá acesso ao nome do usuário. Como está no cookie, não precisamos adicioná-lo às nossas solicitações.

Cookie persistente

Cookies persistentes não são excluídos pelo navegador quando o usuário o fecha. Esses cookies têm uma data de expiração que você pode definir no seu servidor. Você pode definir um cookie para expirar em um dia ou dez anos.

Cookie de terceiros

Podemos diferenciar cookies que estão no mesmo domínio dos cookies que vêm de fornecedores de terceiros. O exemplo que demos anteriormente com o Google Analytics é um exemplo de um cookie de terceiros. Cookies de terceiros podem ser usados para rastrear atividades do usuário. Para definir um cookie de terceiros, você precisa definir ';domain=terceirodominio.com'.

Cookie Max-Age vs Expiração

Cookies geralmente são temporários, então você pode querer definir uma data de expiração precisa. Você tem duas estratégias:

• Use Expires e defina uma data de expiração fixa. A data usa o formato de data HTTP: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT. Então, por exemplo, se quisermos que nosso cookie expire em 17 de setembro de 2020, podemos fazer o seguinte:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• O uso de ‘Max-Age’ não é suportado por todos os navegadores. Mas é a solução mais sólida. Isso força o cookie a expirar um determinado tempo (em segundos) após o cliente recebê-lo:

// Expira após um dia
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? É basicamente isso! Espero que agora você tenha uma ideia melhor de como usar cookies no lado do cliente com JavaScript. Se tiver alguma dúvida, pergunte-nos no Twitter. Na próxima vez, veremos como gerenciar sessões com cookies e Express.js.