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?

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

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.

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.