Aula 64 — Application Storage & DevTools

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

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:

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.

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