Quais são as principais diferenças entre LocalStorage, SessionStorage e Cookies no armazenamento de dados no navegador?

LocalStorage, SessionStorage e Cookies são três formas de armazenar dados no navegador, mas diferem em volume, tempo de vida e âmbito de visibilidade:

• LocalStorage:

  • Armazena dados sem data de expiração, até que o utilizador os apague manualmente.
  • Os dados estão disponíveis em todas as abas e janelas de um mesmo domínio.
  • O volume costuma ser de cerca de 5-10 MB.
  • Não é enviado ao servidor em cada pedido.

• SessionStorage:

  • Os dados vivem apenas na sessão atual (enquanto a aba do navegador estiver aberta).
  • Os dados não estão acessíveis noutras abas ou janelas.
  • O volume é semelhante ao do LocalStorage.
  • Não é enviado ao servidor.

• Cookies:

  • Têm um volume limitado (cerca de 4 KB).
  • Podem ter um prazo de validade, após o qual são eliminados.
  • São enviados ao servidor em cada pedido HTTP ao domínio correspondente.
  • São usados para autenticação, rastreamento de sessões, etc.

Exemplo de uso do LocalStorage:

// Guardar dados
localStorage.setItem('username', 'user123');

// Obter dados
const user = localStorage.getItem('username');