Carregando...

HTML Web Storage

Antes, canvas era um bitmap vazio que o JavaScript pintava. Esta lição deixa o desenho e apresenta Web Storage: lembrar pequenas cadeias chave/valor no browser com localStorage e sessionStorage. O HTML continua a carregar um script; esse script chama APIs de armazenamento. Âmbito prático — guardar/ler e duração — não cookies, IndexedDB nem base de dados de servidor.

Por que web storage num curso HTML

Principiantes querem que um tema ou nome sobreviva ao atualizar. Web Storage é a primeira ferramenta habitual. Após canvas, a divisão é outra: HTML possui a casca; JS o lembrar cadeias para essa origem. Bastam setItem, getItem e local vs session.

Resposta direta

1) localStorage.setItem guarda uma cadeia. 2) getItem lê-a. 3) localStorage até limpar. 4) sessionStorage para o separador/sessão. 5) Nenhuma etiqueta HTML substitui as APIs. 6) Só preferências leves; objetos precisam de JSON porque os valores são cadeias.

📊 localStorage vs sessionStorage

Topic localStorage sessionStorage
Typical lifetime Until cleared by user/site/code Until the tab/session ends
Survives browser restart Usually yes (same origin) No
Shared across tabs (same origin) Yes (same storage) No (per tab/session)
API shape setItem / getItem / removeItem Same method names
Beginner fit Theme, language preference One-tab wizard draft, temp flags
This course depth Intro save/read only Intro save/read only

Mini demo localStorage

Um clique guarda uma saudação e mostra-a num parágrafo. Após atualizar, getItem ainda encontra o valor para essa origem — a ideia «local».

localStorage setItem and getItem

html 
<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>

Ler as chamadas localStorage

  • localStorage é um objeto do browser para scripts da página
  • setItem guarda a cadeia sob uma chave
  • getItem lê-a (ou null)
  • Mostrar em p prova persistência sem desenhar (ao contrário de canvas)
  • Chaves e valores são cadeias
  • Limpar: removeItem ou DevTools

sessionStorage para dados só do separador

Mesmos nomes de métodos, vida mais curta. Útil para um rascunho de um separador que desaparece ao fechar.

sessionStorage note

html 
<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>

Ler a ideia sessionStorage

  • Mesmo padrão setItem/getItem
  • Restaurado ao atualizar no mesmo separador
  • Outro separador tipicamente não vê os mesmos dados
  • Continuam cadeias; não para palavras-passe
  • Escolha local vs session pela duração
  • A seguir: geolocation

O que guardar

  • Tema/idioma: localStorage
  • Flag de assistente só este separador: sessionStorage
  • Segredos: nenhum
  • Ficheiros grandes: fora desta intro
  • Contas de servidor: backend
  • Desenhar píxeis: foi canvas

Prática — lembrar uma preferência

  1. Cole a demo localStorage e guarde.
  2. Atualize; confirme restauro.
  3. Teste sessionStorage no mesmo separador.
  4. Feche o separador e reabra.
  5. Guarde um número — volta como cadeia.
  6. Frase: canvas pinta píxeis; Web Storage guarda cadeias.
  7. Antevisão: geolocation.

Erros fáceis

  • Esperar uma etiqueta storage
  • Guardar palavras-passe
  • Esquecer que são cadeias (JSON para objetos)
  • Confundir com canvas ou cookies
  • Achar que sessionStorage dura para sempre
  • Assumir partilha com outros dispositivos
  • Tratar a intro como curso de bases de dados

Resumo

  • Web Storage é uma API JS: localStorage e sessionStorage
  • setItem/getItem guardam cadeias para a sua origem
  • local até limpar; session para separador/sessão
  • Para preferências leves — não para segredos
  • Canvas eram píxeis; esta lição cadeias lembradas
  • Seguinte: geolocation em HTML

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
5
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 63 de 68
Html Tutorial