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:

O localStorage armazena apenas strings.

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();
Use clear() com cuidado — ele remove tudo.

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
localStorage é ideal para preferências e estado persistente.

Resumo da aula para nunca mais esquecer

  • localStorage persiste dados no navegador
  • Funciona no formato chave → valor
  • Armazena apenas strings
  • JSON permite salvar objetos
  • É muito usado no frontend moderno

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

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

Mouse

O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.

Playstation

O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.