LocalStorage e Cookies: diferenças e uso

Cookies

São dados que são armazenados no navegador e são criados para persistir as informações de um usuário em sessão. Os cookies serão criados para identificar o usuário em um site e poder rastrear sua navegação enviando esses dados ao navegador.

Por meio delas, permite ao usuário, que no caso de abandonar o site e voltar a ele após alguns dias (se os cookies não tiverem sido excluídos ou seu tempo de expiração não tiver expirado), poder recuperar os dados de sua sessão anterior.

A experiência do usuário por meio de cookies melhora exponencialmente porque, sem elas, ele teria que fazer login novamente após fechar o site e teria (no caso dos ecommerces) que voltar a adicionar ao carrinho todos os produtos que estavam associados a ele na sessão anterior. Os cookies são uma parte muito importante e, em muitos casos, indispensável na experiência da internet.

Prós e contras dos cookies:

Prós:

Praticamente todos os comércios eletrônicos armazenam as informações do carrinho no cookie para persistir e não desaparecer após o fechamento do navegador.
Lembrar as informações do formulário após o envio do mesmo.
Armazenar preferências de idioma e moeda.
Definir uma data de expiração para o cookie.
Permite que os servidores web saibam se o usuário fez login no site.
Se os cookies não forem permitidos, o comportamento anterior não ocorrerá e nunca se lembrará se a sessão foi iniciada ou não.

Contras:

Os dados não estão criptografados.
O tamanho da solicitação está limitado a 4KB.
A injeção de SQL pode ser realizada a partir de um cookie.

LocalStorage

É uma nova característica trazida após a nova revisão HTML5 na qual nos permite armazenar informações do tipo chave-valor no lado do cliente. Esta tecnologia poderá ser usada em novas versões de navegadores e é o padrão para o qual se pretende fazer a transição na hora de persistir dados no navegador. Assim como ocorre com os cookies, o LocalStorage permite manter dados do cliente, mas com a diferença de que, no último, só poderão ser acessíveis a partir da janela atual onde se está navegando e do domínio atual.

Prós e contras do LocalStorage:

Prós:

É possível acessar os dados de forma fácil e rápida.
Não é necessária conexão com a Internet para acessar os dados.
Limite de armazenamento: 5 MB por origem no Google Chrome, Mozilla Firefox e Opera. 10 MB por área de armazenamento no Internet Explorer

Contras:

A informação armazenada nele não pode ser acessada diretamente do servidor.
São necessários backups periódicos para evitar a perda de dados.
O usuário é responsável pela segurança dos dados.

Conclusão:

O armazenamento em cookies e no LocalStorage têm diferentes propósitos. Como foi comentado antes, os cookies podem ser diretamente lidos pelo servidor, enquanto o LocalStorage apenas armazena e permite a leitura dos dados pelo cliente. Os cookies têm um limite de armazenamento bastante mais reduzido em comparação ao LocalStorage e este, tecnicamente, é mais fácil de usar e te permite mais com o que trabalhar.

O que determinaria se deve ou não usar um método ou outro para armazenar e persistir os dados do usuário no site seria se esses dados são necessários no cliente ou no servidor.