DEV Community

Cover image for LocalStorage, SessionStorage e Cookies
Guilherme Gomes
Guilherme Gomes

Posted on • Edited on

LocalStorage, SessionStorage e Cookies

No desenvolvimento web, é de grande importância ter conhecimento e habilidade ao gerenciar os dados do lado do cliente. Muitos desenvolvedores utilizam localStorage, sessionStorage e cookies para armazenar esses dados no navegador do usuário. Embora esses três mecanismos tenham propósitos semelhantes, há diferenças em termos de capacidade, durabilidade e seus casos de uso. Neste artigo, vamos explorar essas diferenças.

1. LocalStorage: Armazenamento persistente no lado do cliente

  • Propósito: É usado para armazenar dados no cliente que persistem mesmo após o fechamento do navegador, sendo ideal para os dados que precisam ser mantidos entre múltiplas sessões.
  • Capacidade: Oferece um espaço de armazenamento considerável, geralmente 10MB por domínio.
  • Durabilidade: Os dados armazenados permanecem disponíveis até serem excluídos pelo usuário ou pela aplicação.
  • Exemplo: Suponha que você tenha um aplicativo de notas. Você pode usar o localStorage para salvar as notas do usuário para que elas sejam preservadas em todas as visitas.

LocalStorage Example


2. SessionStorage: Armazenamento temporário com base na sessão

  • Propósito: Também armazena os dados do cliente, porém, a duração da sessão da página é limitada. Isso significa que os dados são apagados quando o usuário fecha a aba ou o navegador.
  • Capacidade: Oferece cerca de 5MB de armazenamento por domínio, suficiente para dados temporários.
  • Durabilidade: Os dados estão disponíveis apenas durante a sessão atual, torna-se perfeito para armazenar informações que não precisam persistir além da sessão atual.
  • Exemplo: Imagine um site de e-commerce que precisa armazenar temporariamente os itens adicionados ao carrinho de compras durante a navegação. Você pode usar o sessionStorage para garantir que, se o usuário navegar para outra página, os itens do carrinho não sejam perdidos.

SessionStorage Example


3. Cookies: Armazenamento de pequenas porções de dados com interação ao servidor

  • Propósito: Cookies são usados para armazenar pequena porções de dados que precisam ser enviados para o servidor com solicitações HTTP. Eles são frequentemente usados para rastrear sessões de usuários, armazenar tokens de autenticação e lembrar configurações de usuário.
  • Capacidade: Limitado a 4KB por cookie, mas é possível armazenar múltiplos tokens.
  • Durabilidade: Cookies podem expirar ao final de uma sessão ou persistir por uma duração específica, o que torna eles versáteis.
  • Exemplo: Para implementar uma notificação de consentimento de cookies que só aparece uma vez, você pode usar cookies para armazenar a preferência do usuário.

Cookie Example


Quando usar cada um desses mecanismos de armazenamento ?
LocalStorage: Use quando precisar armazenar grande quantidade de dados que devem persistir em várias sessões.
SessionStorage: Ideal para dados temporários que devem persistir apenas durante a sessão do usuário.
Cookies: Melhor para armazenar pequenas porções de dados que precisam ser enviados para o servidor com solicitações HTTP.


Conclusão
Entender as diferenças entre eles irá te ajudar muito na escolha certa para o uso em suas aplicações. Cada um tem suas próprias vantagens e limitações, tendo o conhecimento das diferenças irá ajudar você a construir aplicações mais eficientes para o usuário.
Tendo o conhecimento e dominando está ferramentas, você estará preparado para gerenciar o armazenamento de dados do lado do cliente em seu próximo projeto, trazendo uma experiência mais fluída para os seus usuários.

Linkedin Profile: Guilherme Gomes

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up