Cookies vs Local Storage: Quais são as principais diferenças?

As cookies e o local storage desempenham um papel crucial na melhoria da experiência dos utilizadores, fornecendo conteúdo personalizado e permitindo várias funcionalidades nos websites. Mas sabes quais as principais diferenças entre estas duas alternativas?

 

O que são cookies?

No contexto da navegação na Web, as cookies são pequenos ficheiros de texto que os websites armazenam no dispositivo de um utilizador. Contêm informações como as preferências, o histórico de navegação, as credenciais de início de sessão, entre outros dados. As cookies são utilizadas principalmente para melhorar a experiência do utilizador, recordando as suas preferências e fornecendo conteúdos personalizados.

As cookies funcionam como um canal de comunicação entre um website e o browser. Quando o utilizador visita um website, o servidor envia uma cookie para o seu browser, que a armazena no seu dispositivo. Posteriormente, sempre que visitar novamente o mesmo website, o seu browser envia a cookie armazenada de volta para o servidor. Isto permite que o website o reconheça.

1. Criação e armazenamento de cookies:

Quando um utilizador visita um website, o servidor pode definir uma cookie incluindo "Set-Cookie" no header da resposta HTTP. O seguinte código demonstra como uma cookie chamada "username" é definida com o valor "RuiJorge":

 
HTTP/1.1 200 OK
Set-Cookie: username=RuiJorge

O browser do utilizador recebe esta resposta e armazena a cookie localmente. A partir desse momento, sempre que o utilizador fizer pedidos subsequentes ao mesmo website, a cookie será automaticamente incluída nos headers do pedido.

2. Aceder aos valores das cookies:

Para aceder ao valor da cookie armazenada em JavaScript, é possível utilizar a propriedade document.cookie. Esta propriedade retorna uma string que contém todas as cookies associadas ao site atual. Eis um exemplo de acesso ao valor da cookie "username":

 
// Retorna uma string com todas as cookies
const cookies = document.cookie; 

// Output: "username=RuiJorge"
console.log(cookies); 

3. Alterar e eliminar cookies:

As cookies podem ser modificadas ou eliminadas definindo uma nova cookie com valores atualizados ou dando instruções ao browser para a remover. Para alterar uma cookie, pode seguir um processo semelhante ao da definição de uma nova cookie:

 
document.cookie = "username=RuiJorge"; // Altera o valor da cookie "username"

Para eliminar uma cookie, pode definir a sua data de expiração para uma que já passou:

 
document.cookie = "username=; expires=Thu, 01 Jan 2000 00:00:00 UTC"; // Apaga a cookie "username"

Lembre-se de que, ao alterar ou apagar cookies, tem de se certificar de que o nome e o path da cookie correspondem à cookie original. Compreender os princípios de funcionamento das cookies é fundamental para compreender a sua funcionalidade e utilizá-las eficazmente no desenvolvimento Web. Ao utilizar os cookies de forma adequada, pode criar experiências personalizadas, implementar a gestão de sessões e melhorar as interações do utilizador no seu website.

 

O que é o Local Storage?

Embora as cookies sejam amplamente usadas e tenham sido o mecanismo de referência para armazenar dados no lado do cliente, elas têm as suas limitações. Uma dessas limitações é o tamanho relativamente pequeno da quantidade de dados que podem ser armazenados. É aqui que o local storage entra em ação.

O local storage (armazenamento local) é um mecanismo de armazenamento na Web que permite aos websites armazenar uma maior quantidade de dados no dispositivo de um utilizador, para além das limitações de tamanho das cookies tradicionais. Ao contrário das cookies, que são enviadas para o servidor com cada pedido, os dados do local storage permanecem no lado do cliente e não são enviados automaticamente para o servidor.

Isto permite um acesso mais rápido às informações armazenadas, reduzindo a necessidade de pedidos frequentes ao servidor e melhorando assim a performance do sistema.

 
// Guarda dados
localStorage.setItem('key', 'value');

// Retorna dados
localStorage.getItem('key');

// Remove dados
localStorage.removeItem('key');

Benefícios e casos de utilização do local storage

O local storage oferece várias vantagens em relação às cookies tradicionais, tornando-a uma escolha apelativa para os programadores. Eis alguns dos principais benefícios e casos de uso:

• Experiência de utilizador melhorada: Com mais capacidade de armazenamento de dados, os websites podem fornecer uma experiência de navegação personalizada e sem falhas aos seus utilizadores. As preferências personalizadas, as definições guardadas e os dados em cache podem ser armazenados no local storage.
• Funcionalidade offline: O local storage permite que os websites funcionem offline, armazenando dados essenciais no lado do cliente. Isto é particularmente útil para aplicações que necessitam de manter a funcionalidade mesmo quando o utilizador não está ligado à Internet.
• Desempenho otimizado: Ao reduzir a necessidade de pedidos frequentes ao servidor, o local storage pode melhorar significativamente o desempenho do website. A colocação em cache de recursos estáticos e o armazenamento local de dados frequentemente acedidos podem resultar em tempos de carregamento mais rápidos e numa interface de utilizador mais reativa.
• Dados persistentes: Ao contrário das cookies baseadas em sessões, os dados do local storage permanecem persistentes mesmo depois de o browser ser fechado e reaberto. Isto significa que os utilizadores podem voltar a um website e encontrar as suas preferências e dados guardados intactos.

 

Quais as principais diferenças?

Para concluir, deixamos uma tabela retirada do website GeeksForGeeks que resume de forma bastante simplificada o tema abordado.

Funcionalidade	Cookies	Local Storage
Tamanho	4 KB	5 MB
Tipo de dados	Strings	Qualquer objeto JavaScript
Envio de dados para o servidor	Enviadas a cada pedido	Não enviado a cada pedido
Expiração	Podem ser definidas para expirar a uma hora/dia específico	Mantido até eliminado
Partilha entre subdomínios	Podem ser partilhadas entre subdomínios	Limitado ao domínio específico
Segurança	Podem ser encriptadas	Não é encriptado, mas os dados armazenados podem ser
Privacidade	Podem ser desativadas pelas definições do utilizador	Não é afetado pelas definições do utilizador
Acessibilidade	Disponíveis em todos os browsers modernos	Disponível em todos os browsers modernos
Performance	Mais lentas que o local storage	Mais rápido do que as cookies
API	API simples para operações básicas	API robusta para operações mais complexas
Utilização	Melhores para pequenas quantidades de dados	Melhor para grandes quantidades de dados e persistência entre visitas

 

Leia também: