Até agora, tudo o que fizemos com JavaScript aconteceu em tempo real: o usuário interage, o código responde — e ao recarregar a página, tudo começa do zero.

Mas aplicações reais precisam ir além:

elas precisam lembrar informações.

Nesta aula, vamos entender onde e como dados podem ser armazenados no navegador.

🎯 Objetivo da aula

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

  • Entender por que armazenar dados no navegador
  • Diferenciar memória de armazenamento
  • Conhecer os tipos de storage disponíveis
  • Saber quando usar armazenamento no cliente
  • Preparar o terreno para localStorage, sessionStorage e cookies

Por que armazenar dados no navegador?

Imagine situações comuns:

  • Salvar o tema escolhido (claro/escuro)
  • Lembrar dados de um formulário
  • Manter o usuário logado
  • Guardar preferências

Sem armazenamento, tudo isso se perde ao recarregar a página.

Memória vs Armazenamento

É muito importante entender essa diferença:

  • Memória → dados vivem enquanto a página está aberta
  • Armazenamento → dados continuam após recarregar ou fechar

Exemplo: 

 let contador = 0; contador++; console.log(contador); 
 console.log(contador); // Saída será 1, mas ao recarregar a página volta para 0

Isso acontece porque a variável vive apenas na memória.

Onde os dados podem ser armazenados?

No contexto do frontend, temos algumas opções:

  • localStorage
  • sessionStorage
  • Cookies
  • IndexedDB

Cada uma tem um propósito diferente.

Armazenamento no cliente vs servidor

Nem todo dado deve ser salvo no navegador.

Regra mental importante:

  • Preferências → cliente
  • Estado temporário → cliente
  • Dados sensíveis → servidor
Nunca armazene senhas ou informações sensíveis no navegador.

Persistência dos dados

Outro conceito importante é o tempo de vida dos dados.

  • Alguns dados duram até fechar a aba
  • Outros duram dias, meses ou indefinidamente

É isso que diferencia sessionStorage de localStorage.

O navegador como mini banco de dados

Hoje, o navegador não é só um exibidor de páginas:

  • Ele armazena dados
  • Ele executa lógica
  • Ele funciona offline

Isso permite criar aplicações cada vez mais completas.

Pensar em armazenamento é pensar em experiência do usuário.

Resumo da aula para nunca mais esquecer

  • Aplicações reais precisam lembrar informações
  • Memória se perde ao recarregar a página
  • Storage persiste dados no navegador
  • Existem vários tipos de armazenamento
  • Cada tipo tem um uso específico

Na próxima aula, vamos aprender na prática o localStorage — o tipo de armazenamento mais usado no frontend.

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?

Space Invaders

O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.

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.

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.

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.