Explique a diferença entre cookies, sessionStorage e localStorage.

Mecanismo	Tamanho (aproximado)	Vida útil	Acesso	Transmitido ao servidor	Uso
Cookies	4 KB	Data de expiração definida pelo servidor ou navegador	Documento atual e subdomínios (dependendo da configuração)	Em cada requisição HTTP	Autenticação, rastreamento, configurações personalizadas do usuário
localStorage	5-10 MB	Indefinido (enquanto o usuário não apagar)	Apenas a origem atual (protocolo, domínio, porta)	Não	Armazenamento de configurações do usuário, dados de estado da aplicação
sessionStorage	5-10 MB	Até fechar a aba/janela do navegador	Apenas a origem atual (protocolo, domínio, porta)	Não	Armazenamento de dados dentro de uma única sessão do usuário

Cookies:

• Enviados com cada requisição HTTP ao servidor, o que pode aumentar o tráfego.
• Função principal: identificação do usuário (cookies de sessão), lembrar preferências, rastrear ações do usuário.
• Disponíveis tanto no lado do cliente (JavaScript) quanto no lado do servidor.
• Podem ser limitados por domínio e caminho.
• Considerados menos seguros para armazenar dados sensíveis devido ao seu envio automático ao servidor.

localStorage:

• Os dados são armazenados localmente no navegador do usuário.
• Usado para armazenamento persistente de dados que não precisam ser enviados ao servidor em cada requisição.
• Possui uma API JavaScript simples.
• Os dados são armazenados em pares chave-valor.
• Não acessível de outros origens.

// Definir valor
localStorage.setItem('username', 'john.doe');

// Obter valor
let username = localStorage.getItem('username');

// Remover valor
localStorage.removeItem('username');

// Limpar todo localStorage
localStorage.clear();

sessionStorage:

• Semelhante ao localStorage, mas os dados são armazenados apenas até fechar a aba ou janela do navegador.
• Ideal para armazenamento temporário de dados relacionados à sessão atual do usuário (por exemplo, dados de formulário, carrinho de compras).
• Também possui uma API JavaScript simples, semelhante ao localStorage.
• Os dados só estão disponíveis na origem atual.

// Definir valor
sessionStorage.setItem('sessionId', 'abc123');

// Obter valor
let sessionId = sessionStorage.getItem('sessionId');

// Remover valor
sessionStorage.removeItem('sessionId');

// Limpar todo sessionStorage
sessionStorage.clear();