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?

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

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.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

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.