50

Quais as diferenças, prós e contras entre localStorage e sessionStorage?

3 Respostas 3

50

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

1. localStorage vs. sessionStorage

2. localStorage and sessionStorage

1
  • 1
    Eu 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
11

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).

6

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .