Quais são as diferenças entre os mecanismos de armazenamento de dados em LocalStorage, SessionStorage e cookies no navegador?

LocalStorage, SessionStorage e cookies são três mecanismos de armazenamento de dados no navegador, que diferem em volume, tempo de vida e acessibilidade.

• LocalStorage

  • Armazena dados sem data de expiração (até serem removidos manualmente).
  • O volume geralmente é de cerca de 5-10 MB.
  • Os dados estão disponíveis em todas as abas e janelas do mesmo domínio.
  • Não são enviados ao servidor em requisições HTTP.

• SessionStorage

  • Os dados vivem apenas durante uma sessão (enquanto a aba estiver aberta).
  • O volume é semelhante ao do LocalStorage.
  • Os dados estão disponíveis apenas na aba/janela atual.
  • Não são enviados ao servidor.

• Cookies

  • Podem ter um prazo de validade, após o qual são excluídos.
  • O volume é limitado (cerca de 4 KB por cookie).
  • Os dados são enviados automaticamente ao servidor em cada requisição ao domínio correspondente.
  • Usados para autenticação, rastreamento, etc.

Exemplo de uso do LocalStorage:

localStorage.setItem('user', 'Alice');
const user = localStorage.getItem('user');