Squad Front

Appearance

LocalStorage e SessionStorage ​

LocalStorage e SessionStorage (Web Storage) são mecanismos de armazenamento chave-valor no navegador que permitem persistir dados do lado do cliente.

Diferenças Cruciais ​

  • LocalStorage: Os dados persistem mesmo após o navegador ser fechado. Útil para preferências de UI (tema dark/light, idioma).
  • SessionStorage: Os dados são limpos quando a aba ou o navegador é fechado. Útil para estados temporários de uma jornada.

O Grande Risco de Segurança ​

Ao contrário dos cookies configurados com HttpOnly, o Web Storage é totalmente acessível via JavaScript. Se sua aplicação sofrer um ataque XSS, o atacante pode ler instantaneamente tudo o que estiver armazenado nessas APIs.

Como fazer vs Como não fazer ​

✅ Como fazer ​

  • Utilize o Web Storage apenas para dados não sensíveis e de baixa criticidade.
  • Exemplos de uso aceitável: preferência de tema, filtros de busca recentes, cache de recursos estáticos não sensíveis.
  • Prefira o SessionStorage para dados que não precisam durar entre sessões, reduzindo a superfície de exposição.

❌ Como não fazer ​

  • Jamais armazene tokens de acesso (JWT), senhas ou segredos no LocalStorage.
  • Nunca armazene dados sensíveis de pacientes (Nomes, CPFs, Laudos) de forma persistente no navegador.
  • Não utilize o LocalStorage como substituto para um banco de dados real; ele tem limites de tamanho (~5MB) e pode ser limpo pelo sistema operacional se o disco estiver cheio.
  • Não confie na integridade dos dados lidos do Storage; o usuário (ou um script malicioso) pode alterar os valores manualmente via DevTools. Sempre valide os dados lidos.