Até agora, aprendemos a salvar dados usando localStorage, sessionStorage e cookies.

Mas surge uma pergunta essencial:

Onde esses dados ficam no navegador? E como podemos visualizá-los?

Nesta aula, vamos aprender a usar o **DevTools do navegador** para inspecionar, editar e limpar dados armazenados.

🎯 Objetivo da aula

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

  • Acessar o Application Storage no navegador
  • Visualizar localStorage, sessionStorage e cookies
  • Editar dados diretamente no DevTools
  • Limpar dados armazenados
  • Usar o DevTools como ferramenta de debug

O que são DevTools?

DevTools (Developer Tools) são ferramentas embutidas no navegador para desenvolvimento e debug.

Você pode abrir:

  • F12
  • Ctrl + Shift + I
  • Clique com o botão direito → Inspecionar

A aba Application

A aba Application é onde o navegador mostra todos os dados armazenados pelo site.

Ela funciona como um “painel de controle” do armazenamento.

Visualizando o localStorage

Dentro de Application → Storage → Local Storage:

  • Você vê todas as chaves
  • Os valores armazenados
  • Pode editar valores manualmente

Exemplo de dado salvo: 

 localStorage.setItem("tema", "escuro");

Esse valor aparecerá imediatamente no DevTools.

Visualizando o sessionStorage

Em Application → Storage → Session Storage:

  • Os dados existem apenas naquela aba
  • Ao fechar a aba, somem
Ótimo para entender o ciclo de vida da sessão.

Visualizando cookies

Em Application → Storage → Cookies:

  • Nome do cookie
  • Valor
  • Domínio
  • Expiração

Aqui você consegue ver claramente:

  • Quais cookies existem
  • Quais são enviados ao servidor

Editando dados pelo DevTools

Você pode clicar duas vezes em um valor e alterá-lo manualmente.

Isso é muito útil para:

  • Testar estados da aplicação
  • Simular preferências do usuário
  • Depurar bugs sem mexer no código

Limpando dados armazenados

No Application Storage, você pode:

  • Apagar um item específico
  • Limpar todo o storage

Ou via JavaScript: 

 localStorage.clear(); sessionStorage.clear();

Storage como ferramenta de debug

Um erro comum é esquecer que:

Dados antigos no storage podem causar bugs.

Sempre que algo parecer “estranho”, verifique:

  • localStorage
  • sessionStorage
  • Cookies

O Application Storage como mapa mental

  • localStorage → persistente
  • sessionStorage → temporário
  • Cookies → comunicação com servidor

Ver isso visualmente ajuda muito a fixar o conceito.

Todo desenvolvedor frontend vive no DevTools.

Resumo da aula para nunca mais esquecer

  • DevTools mostram todo o armazenamento do site
  • A aba Application centraliza os dados
  • É possível editar e apagar valores
  • Storage é parte essencial do debug
  • Ver dados ajuda a entender aplicações

Na próxima aula, vamos falar sobre Offline Webapps — como aplicações podem funcionar mesmo sem internet.

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?

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais 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.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.