Armazenamento web
localStorage continua depois de fechar o programa. Uma nota curta fica no navegador, só para este sítio. O convidado lida e a bebida tea ficam nesta página, e a linha lê-se saved / lida / tea.
A página dos padrões já fechou
Os cookies ficam para uma página seguinte. Este armazenamento não segue colado a cada pedido que o navegador envia. A página dos padrões terminou em true / Order: mint. Uma chave em falta não lança nada: getItem devolve null.
Até o número vira texto
Um número fica guardado como texto. setItem escreve sob uma chave e getItem lê-a.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
O registo mostra tea e depois null, porque size nunca foi escrito. setItem("count", 2) guarda os caracteres 2, não um número. Depois de recarregar, getItem("drink") continua tea.
O objeto viaja como texto
Um objeto simples passado a setItem vira o texto [object Object]. JSON.stringify produz texto que se pode guardar, e JSON.parse reconstrói o objeto. JSON.parse(null) lança erro, por isso lê primeiro e salta a análise quando o valor for null.
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
A chave w3-order guarda texto, e o valor analisado volta a ser um objeto. Qualquer página da mesma origem pode ler essa chave. O registo é lida / tea.
A aba, ou o navegador
sessionStorage tem os mesmos três métodos e vive até essa aba fechar. localStorage ainda está lá quando o navegador abre de novo. removeItem apaga uma chave. clear apaga todas as chaves desta origem, portanto não o chames só para arrumar um pedido.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
Uma segunda aba não vê essa chave de sessionStorage. A chave w3-order de localStorage está nas duas abas. Fechar a aba larga apenas a nota da sessão. O registo é mint, depois null.
Uma origem para todas as páginas
O esquema, o anfitrião e a porta partilham a caixa. Não é uma caixa de um só ficheiro. Uma chave posta na página inicial aparece na página do pedido do mesmo sítio. Outro sítio não a lê.
O que a página mostra
A página escreve o pedido, volta a lê-lo e mostra o convidado e a bebida.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
Recarrega e as mesmas palavras voltam de localStorage. A linha lê-se saved / lida / tea. true / Order: mint era a página dos padrões.
Cinco passos curtos
- Com setItem põe drink em tea. getItem devolve tea.
- Pede size com getItem. O resultado é null.
- Guarda o pedido com JSON.stringify. Depois de JSON.parse o registo é lida / tea.
- Mete mint em sessionStorage e chama removeItem. getItem devolve null.
- Lê a página. A linha é saved / lida / tea.
Enganos
O armazenamento lembra cadeias, não objetos vivos. clear é a origem inteira, não uma chave.
- Passar um objeto e depois ler [object Object]
- Chamar JSON.parse sobre null
- Esperar que sessionStorage sobreviva numa aba nova
- Chamar clear e apagar todas as chaves
- Ler a linha como true / Order: mint
Fica contigo
- setItem e getItem guardam e leem cadeias
- uma chave em falta é null
- os objetos entram com JSON.stringify e saem com JSON.parse
- localStorage sobrevive a um reinício
- sessionStorage acaba com a aba
- a linha da página é saved / lida / tea
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 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