O documento explica as diferenças entre localStorage e sessionStorage para armazenamento de dados no navegador. LocalStorage armazena dados permanentemente sem expiração, enquanto sessionStorage armazena dados temporariamente para uma sessão. Ambos fornecem mais espaço de armazenamento do que cookies.

1. Armazenamento de dados
com localStorage e sessionStorage

2. Jackson Veroneze
Software Developer
jackson@jacksonveroneze.com
https://jacksonveroneze.com
https://br.linkedin.com/in/jacksonveroneze
Mario Mendonça
Software Developer
mario.mendonca@gmail.com
https://br.linkedin.com/in/mario-mendonca
Autores

3. Entendendo os Cookies e Sessões
Os cookies são “persistências temporárias” feitas no lado do usuário, e
sessões são persistências dependentes de cookies, mas realizadas no lado do
servidor.

4. Cookies
Através de cookies o servidor Web é capaz de trocar informações de estado
com o navegador do usuário. Ex.: Carrinho de compras.
Tecnicamente falando, um cookie é uma pequena quantidade de informação
persistida temporariamente pelo navegador. Os navegadores normalmente
limitam o tamanho dos cookies em até 4KB, e apagam cookies com a data de
“validade vencida”.

5. Exemplo

6. Sessões
As sessões têm um princípio similar aos cookies, só que o armazenamento do
estado é feito pelo servidor Web, e não pelo navegador.
Por exemplo, uma aplicação que necessita de autenticação. Dados “sensíveis”,
como usuário e e-mail, são mais interessantes de serem guardadas em
sessões. Isto, pois não é seguro que esse tipo de informação fique “viajando”
pela Web.

7. Exemplo

8. LocalStorage
O localStorage salva dados no computador do visitante, que ficam vinculados
ao (e apenas acessíveis pelo) seu domínio. E para usar é bem simples:
Use o método setItem(nome, valor) para criar/salvar novos itens e o depois o
método getItem(nome) para recuperar o valor.

9. LocalStorage
Local storage é persistente; Ele armazena dados sem data de expiração.
Local storage é muito semelhante aos cookies exceto por algumas diferenças
importantes, como:
permite muito mais espaço de armazenamento.
é transmitido apenas mediante pedido. Isto significa que podemos
armazenar grandes quantidades de dados sem afetar o desempenho do
site.

10. Exemplo

11. Limites do LocalStorage
Segundo a especificação da W3C, ela sugere(não é obrigatório) que o espaço
reservado por origem seja de 5MB e no futuro esse limite pode ser atualizado,
a origem citada anteriormente no caso é por cada domínios.

12. SessionStorage
É um mecanismo que foi projetado com a finalidade de armazenar dados para
transação em um documento HTML, isto é, para cada novo documento HTML,
é criada uma área de armazenamento de dados independente.

13. Exemplo

14. Suporte

15. Conclusão
Ambos localStorage e sessionStorage se extendem de Storage. Não há
diferença entre eles, exceto para a não-persistência de sessionStorage.
Utilize localStorage para uso a longo prazo e sessionStorage quando você
precisa armazenar algo temporário(i.e. dados de uma sessão). Ambos
também são escopo por fabricantes de navegadores.

16. Referências
http://klauslaube.com.br/2012/04/05/entendendo-os-cookies-e-sessoes.html
http://blog.thiagobelem.net/armazenando-informacoes-no-computador-do-
visitante-com-localstorage-e-sessionstorage
http://pt.stackoverflow.com/questions/19384/diferen%C3%A7as-entre-
localstorage-vs-sessionstorage