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

? ? ? não é bem assim… ??? 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 é tudo isso, vamos lá?

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 opcionais adicionais. Os valores são strings e você pode armazenar o que achar melhor para sua aplicação. O cookie _ga do Google Analytics é provavelmente um dos || o cookie mais comum por aí, geralmente se parece com isso:

• Nome: _ga
• Valor: GA1.3.210706468.1583989741
• Domínio: .exemplo.com
• Caminho: /
• Expira / Máx-Idade: 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 qualquer outra coisa que você possa encaixar 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á usando para seu servidor web; você pode usar diferentes ferramentas e bibliotecas para gerenciar cabeçalhos de cookie. Essas ferramentas devem criar respostas HTTP que se parecem aproximadamente com isso:

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 via 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 possui o Google Analytics instalado e no console do desenvolvedor, podemos fazer:

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

// Este sinal de igual não funciona como você espera
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// registra "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; jacaré=conteúdo_do_cookie_jacaré"
// Observe que o trecho de código anterior anexa o novo cookie que criamos

// Uma implementação básica de uma interface de cookie poderia se parecer com isso:
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 frequentemente se referem a um tipo de cookie que existe até que o navegador seja fechado. Para configurar um cookie de sessão, você só precisa NÃO especificar nenhuma 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 em 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 de cookies que vêm de provedores 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ê tem que definir ';domain=terceirodominio.com'.

Cookie Max-Age vs Expirar

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 utiliza o formato de data HTTP: <nome-do-dia>, <dia> <mês> <ano> <hora>:<minuto>:<segundo> GMT. Então, por exemplo, se quisermos que nosso cookie expire em 17 de setembro de 2020, podemos fazer:

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. Ele força o cookie a expirar um certo período de 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.