Quais as diferenças, prós e contras entre localStorage
e sessionStorage
?
3 Respostas
Ambos localStorage
e sessionStorage
se extendem de Storage
. Não há diferença entre eles, exceto para a não-persistência de sessionStorage
.
A não-persistência como descrito acima é no sentido de que sessionStorage
se faz disponível apenas para a janela que criou os dados até que tal janela seja fechada, ao abrir outra janela(ou aba) tais dados não estarão disponíveis.
Em contrapartida de sessionStorage
, ao criar dados em localStorage
esses dados estarão disponíveis para qualquer aba/janela mesmo que o usuário encerre a janela, reinicie o sistema, etc.
Um exemplo, vamos supor que você deseja salvar o nome de usuário e senha para realizar um login, é provável que você opte por armazenar esses dados em sessionStorage
por motivos de segurança e salvar as configurações de usuário em localStorage
.
Utilize localStorage
para uso a longo prazo e sessionStorage
quando você precisa armazenar algo temporário(ie dados de uma sessão).
Ambos também são escopo por fabricantes de navegadores. De modo que os dados de armazenamento salvos pelo IE não pode ser lidos pelo Chrome ou FF.
Você pode ver uma demonstração aqui.
Referências
-
1Eu acho que fica ruim armazenar usuario e senha, como no seu exemplo, no session storage uma vez que dificilmente o usuario utilizará apenas uma aba ao utilizar seu sistema. Commented 19/10/2015 às 15:12
sessionStorage
- É semelhante a um cookie
que expira ao fechar o navegador. ela possui a mesma extrutura do localStorage
, porém não existe como mudar seu tempo de permanência, sempre que fechar irá ser excluída.
localStorage
- É semelhante a um cookie
, porém que nunca expira, desta forma enquanto houve os registros no AppCache
referente à aquele domínio, a variável irá existir (A menos que o usuário crie uma rotina para remove-la).
Ambos os atributos foram acrescentados pelo HTML5. Os itens acima chamados de armazenamento na web.
Mas existem outras formas de armazenamento local através do HTML5
, tal como base de dados WebSQL
, Base de dados Indexadas (IndexDB)
, assim como arquivos convencionais (File Access)
.
Separei alguns pontos que podem ser comparados entre localStorage, sessionStorage e cookies, tendo em vista que também podem ser utilizados para armazenamento.
Inicialização
Cookies podem ser definidos tanto do lado do cliente quanto no lado do servidor utilizando o header Set-Cookie
enquanto para o LocalStorage e o SessionStorage apenas são definidos no lado do cliente.
Tempo de expiração
Os cookies tem o tempo de expiração configurado manualmente, enquanto o localStorage não possui tempo de expiração e o sessionStorage expira ao sair da aba em que foi populado.
Escopo
Em relação ao escopo dos valores, com os cookies e o localstorage os valores são globais, já com os valores sessionStorage apenas podem ser acessados na aba em que foram definidos.
Capacidade de armazenamento
Por fim, a capacidade de armazenamento dos cookies são de 4kb enquanto no sessionStorage e no localStorage possuem uma capacidade muito maior com 5MB em ambos.
Referências
https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
https://tutorial.techaltum.com/local-and-session-storage.html
https://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key