Aula 61 — localStorage

Na aula anterior, entendemos por que aplicações reais precisam armazenar dados no navegador.

Agora vamos aprender a usar o tipo de armazenamento mais comum no frontend:

localStorage

🎯 Objetivo da aula

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

• Entender o que é o localStorage
• Salvar dados no navegador
• Recuperar dados salvos
• Remover dados do localStorage
• Salvar objetos usando JSON

O que é o localStorage?

O localStorage é um mecanismo de armazenamento que:

• Guarda dados no navegador
• Não expira automaticamente
• Permanece mesmo após fechar o navegador

Ou seja: os dados ficam salvos até serem removidos.

Como os dados são armazenados?

O localStorage funciona no formato:

chave → valor

⚠️ Importante:

Salvando um dado simples

 localStorage.setItem("nome", "Daniel"); 

Esse valor agora está salvo no navegador.

Lendo um dado salvo

 
  const nome = localStorage.getItem("nome");
  console.log(nome);

 console.log(nome); // Saída será "Daniel" 

Atualizando um valor

Para atualizar um valor, basta usar a mesma chave:

 localStorage.setItem("nome", "Ana"); 

Removendo um item específico

 localStorage.removeItem("nome"); 

Limpando todo o localStorage

 localStorage.clear(); 

Salvando números e booleanos

Mesmo números e booleanos viram strings:

 
  localStorage.setItem("idade", 30); 
  localStorage.setItem("ativo", true);
  console.log(localStorage.getItem("idade"));
  console.log(localStorage.getItem("ativo"));

 
  console.log(localStorage.getItem("idade")); // "30" 
  console.log(localStorage.getItem("ativo")); // "true" 

Se precisar do tipo original, será necessário converter.

Salvando objetos no localStorage

Como o localStorage só aceita strings, usamos JSON.

 
    const usuario = { nome: "Carlos", idade: 40 };
    localStorage.setItem("usuario", JSON.stringify(usuario));

Lendo objetos salvos

 
  const usuarioSalvo = JSON.parse(localStorage.getItem("usuario"));
  console.log(usuarioSalvo.nome);

 console.log(usuarioSalvo.nome); // Saída será "Carlos" 

Exemplo real: salvando tema da página

 
  function salvarTema(tema) 
  { 
    localStorage.setItem("tema", tema); 
  }
  function carregarTema() 
  {
    const tema = localStorage.getItem("tema");
    if (tema) 
      {
        document.body.classList.add(tema);
      }
  }

Assim, o tema permanece mesmo após recarregar a página.

Boas práticas com localStorage

• Use chaves com nomes claros
• Evite salvar dados sensíveis
• Use JSON para dados complexos
• Verifique se o dado existe antes de usar

Na próxima aula, vamos aprender sobre sessionStorage e entender quando usá-lo no lugar do localStorage.