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

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.

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.

Recorde de patentes

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.

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.

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.