Explique a diferença entre cookies, sessionStorage e…

Cookies, sessionStorage e localStorage são mecanismos de armazenamento web que diferem em propósito, duração e volume de dados armazenados.

Cookies: Pequenos fragmentos de dados enviados pelo servidor web e armazenados no computador do utilizador pelo navegador web. São enviados com cada pedido subsequente ao mesmo servidor. Utilizados para autenticação, armazenamento de preferências do utilizador, rastreamento do estado do carrinho de compras.
- Duração: Definida na criação (pode ser de sessão ou com uma data de expiração específica).
- Volume: Limitado, geralmente alguns quilobytes (cerca de 4 KB).
sessionStorage: Armazena dados apenas para uma sessão do navegador (aba ou janela aberta). Os dados são eliminados ao fechar a aba ou janela.
- Duração: Até fechar a aba ou janela do navegador.
- Volume: Significativamente maior que as cookies (geralmente vários megabytes).
localStorage: Armazena dados sem data de expiração, até serem explicitamente eliminados pelo utilizador ou por um script. Disponível em todas as abas e janelas do mesmo domínio.
- Duração: Permanente (até ser eliminado explicitamente).
- Volume: Significativamente maior que as cookies (geralmente vários megabytes).

Aqui uma comparação breve:

Mecanismo	Duração	Disponibilidade	Enviado ao servidor	Volume (típico)	Propósito
Cookies	De sessão ou com expiração	Via cabeçalhos HTTP	Sim	~4 KB	Autenticação, rastreamento, preferências
sessionStorage	Até fechar a aba/janela	Via API JS	Não	~5-10 MB	Armazenamento temporário de dados de sessão
localStorage	Permanente (até eliminar)	Via API JS	Não	~5-10 MB	Armazenamento de dados a longo prazo

Exemplos de uso com API JavaScript:

// Cookies (acesso via document.cookie, requer análise e serialização manual)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Limpa todos os dados em localStorage

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