Aula 63 — Cookies

Até agora, aprendemos a usar localStorage e sessionStorage para armazenar dados no navegador.

Mas antes deles existirem, já havia uma solução clássica para guardar informações:

os cookies 🍪

Eles ainda são muito usados — especialmente quando o assunto envolve comunicação com o servidor.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que são cookies
• Saber como cookies funcionam
• Criar, ler e apagar cookies com JavaScript
• Comparar cookies com localStorage e sessionStorage
• Saber quando (e quando não) usar cookies

O que são cookies?

Cookies são pequenos dados armazenados no navegador que:

• São enviados automaticamente ao servidor
• Têm data de expiração
• São associados a um domínio

Eles foram criados principalmente para:

• Manter sessões de usuário
• Identificar visitantes
• Salvar preferências simples

Diferença fundamental dos cookies

A principal diferença é:

Já:

• localStorage → só no navegador
• sessionStorage → só no navegador

Como um cookie é armazenado?

Um cookie possui:

• Nome
• Valor
• Expiração
• Caminho (path)
• Domínio

Exemplo conceitual:

usuario=Daniel; expires=Fri, 31 Dec 2026 23:59:59 GMT

Criando um cookie com JavaScript

 document.cookie = "usuario=Daniel; path=/"; 

Esse cookie:

• Se chama usuario
• Tem valor Daniel
• Vale para todo o site

Criando cookie com expiração

 
    const data = new Date(); data.setDate(data.getDate() + 7);
    document.cookie = tema=escuro; expires=${data.toUTCString()}; path=/;

Esse cookie dura 7 dias.

Lendo cookies

Todos os cookies ficam disponíveis em:

 console.log(document.cookie); 

 console.log(document.cookie); // Saída será algo como: "usuario=Daniel; tema=escuro" 

⚠️ Cookies vêm como uma string única — é preciso tratá-los.

Função simples para ler um cookie

 
  function getCookie(nome) 
  { 
    const cookies = document.cookie.split("; "); for (let cookie of cookies) 
    { 
      const [chave, valor] = cookie.split("="); 
      if (chave === nome) 
        { 
          return valor; 
        } 
    } 
      return null; 
  } 

 console.log(getCookie("usuario")); // Saída será "Daniel" 

Apagando um cookie

Para apagar um cookie, basta definir uma data no passado:

 document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"; 

Cookies vs localStorage

• Cookies → enviados ao servidor
• localStorage → só no navegador
• Cookies → tamanho limitado (~4KB)
• localStorage → mais espaço

Segurança e privacidade

Cookies estão ligados a:

• LGPD
• Consentimento de usuário
• Privacidade

Quando usar cookies?

• Sessão de login
• Autenticação
• Integração com backend
• Preferências simples

Quando NÃO usar cookies?

• Grandes volumes de dados
• Estado complexo da aplicação
• Dados sensíveis no frontend

Na próxima aula, vamos aprender a usar o Application Storage no navegador e entender como visualizar e depurar dados salvos.