🚀 Capítulo 17: LocalStorage
🎯 Objetivo da Aula
Ao final desta aula, você saberá como salvar pequenas informações no navegador do usuário usando o localStorage, fazendo com que os dados continuem lá mesmo se a página for fechada.
🏢 O Cenário Prático (Seu Desafio)
O nome do piloto precisa ficar gravado no sistema! Não podemos pedir o nome toda vez que a nave for ligada. Seu desafio é salvar o nome do piloto no localStorage!
🧠 Fundamentos: A Teoria Traduzida
O localStorage é como um pequeno banco de dados que fica dentro do navegador. Ele guarda as informações em formato de texto (Chave e Valor).
Os métodos principais são:
- Salvar:
localStorage.setItem('nome', 'Luke'); - Ler:
const nome = localStorage.getItem('nome'); - Remover:
localStorage.removeItem('nome');
📖 Exemplo Guiado: Gravando o Nome do Piloto
// Salvando
localStorage.setItem('piloto', 'Luke Skywalker');
// Lendo
const pilotoSalvo = localStorage.getItem('piloto');
console.log('Bem-vindo de volta, ' + pilotoSalvo);🛠️ Prática Obrigatória 1
Crie um campo de texto e um botão “Salvar”. Quando clicado, salve o valor do campo no localStorage.
🛠️ Prática Obrigatória 2
Faça com que, ao carregar a página (window.onload ou apenas no script), o texto salvo apareça em um parágrafo.
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
// Salvar
localStorage.setItem('meuDado', input.value);
// Ler
const dado = localStorage.getItem('meuDado');
if (dado) {
paragrafo.innerText = dado;
}