Usar Cookies ou LocalStorage: quando usar o quê?4 min read

Categoria: Front-end HTML5 JavaScript

Em desenvolvimento web, há várias maneiras de armazenar informações no lado do cliente. Duas das opções mais populares são cookies e localStorage. Ambos têm seus usos e casos específicos onde brilham. Mas, quando você deve usar um em vez do outro? Este artigo tem como objetivo elucidar isso.

O que são Cookies?

Cookies são pequenos pedaços de dados que são armazenados no navegador do usuário pelo servidor. Eles são enviados de volta ao servidor com cada solicitação subsequente. Isso é útil para rastrear informações de sessão, personalizar o conteúdo do usuário ou registrar informações de comportamento do usuário.

O que é o LocalStorage?

O localStorage é uma implementação da API Web Storage, que permite aos desenvolvedores web armazenar dados diretamente no navegador web do usuário. Ao contrário dos cookies, os dados no localStorage não são enviados de volta ao servidor em cada solicitação. Além disso, eles têm uma capacidade muito maior, podendo armazenar até 5MB de dados por domínio.

Cookies vs. LocalStorage: quando usar o quê?

A escolha entre cookies e localStorage geralmente se resume ao tipo de dados que você está armazenando e como planeja usá-los. Aqui estão alguns casos de uso comuns para cada um:

Usando Cookies:

1. Manter o Estado da Sessão: Este é provavelmente o uso mais comum de cookies. Eles podem armazenar informações sobre o estado atual da sessão do usuário, permitindo que o servidor saiba quem é o usuário e o que ele está fazendo.
2. Personalização: Cookies podem ser usados para rastrear preferências do usuário, como idioma, cor do tema, entre outros, e personalizar a experiência do usuário com base nessas preferências.
3. Rastreamento: Devido ao fato de que os cookies são enviados de volta ao servidor com cada solicitação, eles são comumente usados para rastrear o comportamento do usuário no site.

Usando LocalStorage:

1. Armazenamento de Dados Pesados: Se você precisa armazenar uma quantidade significativa de dados no lado do cliente, o localStorage pode ser uma boa escolha devido à sua grande capacidade.
2. Persistência de Dados: Diferente dos cookies, que podem expirar, o localStorage persiste até que seja explicitamente removido. Isso o torna uma boa escolha para dados que você deseja manter por um longo período, como a pontuação alta em um jogo.
3. Dados que não precisam ser enviados ao servidor: Se você está armazenando dados que não precisam ser enviados de volta ao servidor, o localStorage pode ser uma opção mais eficiente do que os cookies.

Exemplos de uso:

• Cookies

// Criar um cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Ler cookies
let allCookies = document.cookie;

• LocalStorage

// Armazenar um item
localStorage.setItem('username', 'John Doe');

// Obter um item
let username = localStorage.getItem('username');

Conclusão

Lembre que em resumo para escolher se você deve ou não utilizar Cookies, ou localStorage, você deve considerar o seguinte:

Offtopic: por que chamamos de “cookie”?

Os “cookies” na computação não têm nada a ver com a deliciosa guloseima que amamos, mas o nome é igualmente intrigante. A origem do termo é um pouco obscura, mas a explicação mais comumente aceita é que ele vem do termo “magic cookie”, usado na programação de Unix para se referir a um pacote de dados que é enviado e recebido de volta sem mudanças.

Outra possível origem é a metáfora da culinária. Assim como os cookies de verdade, os cookies da web contêm uma mistura de ingredientes (dados) que são misturados e então “assados” (enviados) para o cliente. Assim como o padeiro que usa os cookies para identificar seus clientes regulares, os sites usam os cookies para reconhecer seus usuários. Vai saber qual foi a ideia dos desenvolvedores deste recurso…

Fontes:

• MDN Web Docs. (2021). “HTTP cookies”. Mozilla Foundation: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
• MDN Web Docs. (2021). “Web Storage API”. Mozilla Foundation: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
• Local Storage vs Cookies: https://stackoverflow.com/questions/3220660/local-storage-vs-cookies