SessionStorage: guardando informações enquanto a aba estiver aberta

Descubra como o SessionStorage funciona para dados temporários da sessão.

Se o localStorage é um armário que continua lá por muito tempo, o sessionStorage é como uma mesa de trabalho temporária:
ele guarda dados enquanto você está usando aquela aba.

Quando a aba é fechada, os dados da sessão são apagados.

O que é SessionStorage?

sessionStorage é uma API do navegador para armazenar dados em formato chave + valor, mas com duração limitada à sessão da aba.

Comportamento principal

  • os dados ficam disponíveis durante a sessão da aba
  • ao fechar a aba/janela, os dados são removidos
  • ao recarregar a página na mesma aba, os dados permanecem
  • cada aba tem sua própria sessão (isolada das outras abas)

Métodos principais

A API é muito parecida com localStorage:

1) Salvar valor

sessionStorage.setItem("nome", "Carla");

2) Ler valor

const nome = sessionStorage.getItem("nome");
console.log(nome); // Carla

3) Remover uma chave

sessionStorage.removeItem("nome");

4) Limpar tudo da sessão

sessionStorage.clear();

Atenção: valores são strings

Assim como no localStorage, o sessionStorage salva valores como texto.

Se precisar salvar objeto/array:

const carrinho = [
  { produto: "Mouse", qtd: 1 },
  { produto: "Teclado", qtd: 1 }
];

sessionStorage.setItem("carrinho", JSON.stringify(carrinho));

Para ler de volta:

const carrinhoSalvo = sessionStorage.getItem("carrinho");
const carrinhoObj = JSON.parse(carrinhoSalvo);

console.log(carrinhoObj);

Exemplo prático: rascunho temporário de formulário

Imagine um formulário grande.
Você pode salvar o que o usuário digita para não perder ao recarregar a página na mesma aba.

<input id="titulo" placeholder="Título do post" />
<textarea id="texto" placeholder="Escreva seu texto"></textarea>

const titulo = document.getElementById("titulo");
const texto = document.getElementById("texto");

// restaurar rascunho ao carregar
titulo.value = sessionStorage.getItem("rascunhoTitulo") || "";
texto.value = sessionStorage.getItem("rascunhoTexto") || "";

// salvar em tempo real
titulo.addEventListener("input", function () {
  sessionStorage.setItem("rascunhoTitulo", titulo.value);
});

texto.addEventListener("input", function () {
  sessionStorage.setItem("rascunhoTexto", texto.value);
});

Quando usar SessionStorage?

Use quando o dado é temporário e só precisa existir na aba atual, por exemplo:

  • rascunho de formulário
  • filtros temporários de uma tela
  • etapa atual de um fluxo curto
  • estado que não deve continuar após fechar a aba

SessionStorage x LocalStorage

  • SessionStorage: dura enquanto a aba estiver aberta.
  • LocalStorage: continua salvo mesmo depois de fechar navegador/aba.

Boas práticas

  • não armazenar dados sensíveis em texto puro
  • limpar dados temporários ao finalizar fluxo
  • usar nomes de chave claros (rascunhoTitulo, filtroProdutos, etc.)
  • escolher entre localStorage e sessionStorage com base na duração desejada

Resumo da lição

  • sessionStorage guarda dados temporários por aba.
  • API parecida com localStorage: setItem, getItem, removeItem, clear.
  • valores são strings; use JSON para objetos/arrays.
  • ideal para estados temporários e rascunhos durante a sessão.