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?

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úsica tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

PC com barulho?

Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.

Pac Man

Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.