JavaScript Academy · Aula

Armazenando e lendo dados

Use setItem, getItem e removeItem.

Armazenando e lendo dados é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Armazenamento de chave e valor no navegador

O Armazenamento da Web fornece a cada origem um armazenamento simples de chave e valor no navegador. As duas APIs, localStorage e sessionStorage, compartilham os mesmos métodos e armazenam apenas strings.

Escrevendo com setItem

Salve um valor com setItem(key, value). Ambos os argumentos são strings.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Lendo com getItem

Recupere um valor com getItem(key). Se a chave não existir, o método retornará null, não undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Acesso por propriedade

Você também pode ler e escrever como se estivesse acessando propriedades de um objeto, mas a forma com método é mais clara e evita conflitos com nomes integrados. Dê preferência aos métodos.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Removendo um item

Exclua uma única entrada com removeItem(key). Remover uma chave inexistente não causa nenhum efeito e não gera erro.

localStorage.removeItem("username");

Limpando tudo

clear() apaga todas as chaves da origem atual. Use-o com cuidado; não há como desfazer a ação.

localStorage.clear();

Tudo é uma string

O armazenamento contém apenas strings. Números e valores booleanos são convertidos em texto. Leia-os de volta como strings e converta-os conforme necessário.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Contando chaves

A propriedade length informa quantas chaves estão armazenadas, e key(index) retorna o nome na posição indicada. Isso é útil para percorrer as chaves.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Percorrendo o armazenamento

Percorra todas as chaves armazenadas usando length e key(). Leia cada valor à medida que avança.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Verificando a existência

Como uma chave ausente retorna null, você pode verificar sua presença com uma simples comparação.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Somente na mesma origem

O armazenamento é limitado à origem (esquema + host + porta). Um site não pode ler o armazenamento de outro site, e http e https são considerados origens diferentes.

Verificação rápida

Lendo e escrevendo no Armazenamento da Web.

Recapitulação

O Armazenamento da Web é um armazenamento de strings com chave e valor separado por origem. Use setItem, getItem (retorna null quando a chave está ausente), removeItem e clear. Percorra as chaves com length e key(i). Tudo é uma string, portanto converta os tipos por conta própria; além disso, o armazenamento é isolado por origem.

Perguntas Frequentes

A aula “Armazenando e lendo dados” é grátis?

Sim — o texto completo de “Armazenando e lendo dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Armazenando e lendo dados”?

Use setItem, getItem e removeItem. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Armazenando e lendo dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy