Javascript

Quando usar sessionStorage e localStorage?

Veja quando utilizar o localStorage ou o sessionStorage para armazenar dados no navegador.

há 6 anos 6 meses

Formação Desenvolvedor JavaScript
Conheça a formação em detalhes

Olá, Web Developers!

Hoje vou falar sobre um erro comum que vejo muitos colegas cometerem: usam o localStorage para armazenar variáveis temporárias.

Django - Módulo administrativo Django Admin
Curso Django - Módulo administrativo Django Admin
Conhecer o curso

Quem usa sabe que o localStorage nos permite armazenar dados de forma simples e sem expiração, ou seja, ficam lá enquanto não apagarmos por código ou pelo próprio navegador.

localStorage.setItem('name', 'Treinaweb');  // <- prefira esta forma
localStorage['name'] = 'Treinaweb';

Porém, já vi situações em que é necessário armazenar um valor logo que o usuário abre a página e manter esse valor enquanto o usuário estiver navegando, mesmo que ele mude de página.

Por ter a possibilidade do usuário clicar em um link e mudar de página (ou recarregá-la), uma variável comum não servirá, pois terá seu valor perdido.

Por isso, muitos desenvolvedores que conhecem o localStorage aproveitam-se dele para esse objetivo. No entanto, o localStorage não tem seus valores apagados, o que causa a necessidade do programador verificar se o usuário acabou de entrar na página para poder apagar ou reiniciar os valores que armazenou no localStorage.

É exatamente para essas ocasiões que existe o sessionStorage. Seu funcionamento e API são idênticos aos do localStorage, com a diferença de que os dados só duram durante a sessão. O usuário pode até mesmo ir para outro site, e as variáveis permanecerão. Elas só serão apagadas quando o usuário fechar o navegador.

sessionStorage.setItem('name', 'Treinaweb');
sessionStorage.getItem('name');

Imagine que o usuário está preenchendo um formulário e pensa em verificar uma informação em outra parte do seu site. Você poderia armazenar os dados do formulário para ele continuar quando voltar. Ao voltar ao formulário, o trabalho dele ainda estará lá.

Se não tem sentido o formulário continuar preenchido caso o usuário tenha fechado o navegador, sem problemas, pois isso irá apagar o sessionStorage, e quando ele voltar, o formulário estará em branco, pronto para um novo preenchimento.

Desta maneira você poderá iniciar suas variáveis temporárias, acessar seus valores enquanto o usuário navega (mesmo que seja para outro site), e não precisará se preocupar em apagar os valores, pois serão apagados automaticamente quando o usuário fechar a janela.

Então, quando precisar de uma variável temporária, lembre-se que o sessionStorage existe para isso. Use o localStorage apenas para dados que devem se manter gravados mesmo com o fechamento do navegador.

Até a próxima!

JavaScript Básico
Curso JavaScript Básico
Conhecer o curso

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos