Aula 62 — sessionStorage

Na aula anterior, aprendemos a usar o localStorage para armazenar dados de forma persistente.

Agora vamos conhecer um tipo de armazenamento muito parecido, porém com um comportamento diferente:

sessionStorage

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que é sessionStorage
• Saber a diferença entre sessionStorage e localStorage
• Salvar e recuperar dados temporários
• Usar sessionStorage em cenários reais
• Escolher o storage correto para cada situação

O que é o sessionStorage?

O sessionStorage é um mecanismo de armazenamento que:

• Guarda dados no navegador
• Funciona por aba (ou guia)
• É apagado quando a aba é fechada

Ou seja: os dados vivem apenas durante a sessão atual.

sessionStorage vs localStorage

• localStorage → persiste mesmo após fechar o navegador
• sessionStorage → existe apenas enquanto a aba estiver aberta

Salvando um dado no sessionStorage

 sessionStorage.setItem("paginaAtual", "checkout"); 

Esse dado ficará disponível apenas enquanto a aba estiver aberta.

Lendo um dado salvo

 
  const pagina = sessionStorage.getItem("paginaAtual");
  console.log(pagina);

 console.log(pagina); // Saída será "checkout" 

Removendo um item

 sessionStorage.removeItem("paginaAtual"); 

Limpando toda a sessão

 sessionStorage.clear(); 

Salvando objetos no sessionStorage

Assim como no localStorage, usamos JSON:

 
  const carrinhoTemp = { itens: 3, total: 120 };
  sessionStorage.setItem("carrinho", JSON.stringify(carrinhoTemp));

Lendo objetos salvos

 
  const carrinhoSalvo = JSON.parse(sessionStorage.getItem("carrinho"));
  console.log(carrinhoSalvo.itens);

 console.log(carrinhoSalvo.itens); // Saída será 3 

Exemplos reais de uso

• Etapas de um formulário (wizard)
• Estado temporário de checkout
• Dados de navegação
• Proteção contra refresh acidental

Quando usar sessionStorage?

Use sessionStorage quando:

• Os dados não devem persistir
• O estado é temporário
• O dado faz sentido apenas naquela aba

Erro comum

Para isso, prefira localStorage ou backend.

Na próxima aula, vamos falar sobre Cookies — o método mais antigo (e ainda importante) de armazenamento no navegador.