JavaScript Academy · Aula

Armazenando objetos com JSON

Serialize objetos para armazená-los e recuperá-los.

Armazenando objetos com JSON é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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.

O armazenamento contém apenas strings

O Armazenamento da Web armazena strings, portanto você não pode salvar um objeto diretamente. Armazená-lo produz o texto inútil "[object Object]". A solução é usar JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Serializando com JSON.stringify

Converta um objeto em uma string JSON com JSON.stringify antes de armazená-lo.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Desserializando com JSON.parse

Ao ler, transforme a string novamente em um objeto com JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Ida e volta

O padrão completo é: aplicar stringify ao armazenar e parse ao ler. Isso funciona tanto para objetos quanto para matrizes.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Tratando o caso null

JSON.parse(null) retorna null (não lança um erro), mas analisar dados ausentes ainda pode causar surpresas. Forneça um valor padrão alternativo.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Protegendo contra corrupção

Se o JSON armazenado estiver malformado, JSON.parse lançará um SyntaxError. Envolva-o em try/catch para que uma entrada inválida não faça o aplicativo falhar.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

Um auxiliar reutilizável para salvar

Envolva a etapa de stringify em um auxiliar para nunca se esquecer dela.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

O que o JSON descarta

O JSON não consegue representar funções, undefined, objetos Date (eles se tornam strings), mapas ou conjuntos. Planeje levando isso em conta; armazene as datas como strings ISO e reconstrua-as ao ler.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Restaurando datas

Como as datas são serializadas como strings, converta-as novamente depois da análise se precisar dos métodos de Date.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Atualizando dados aninhados

Para alterar parte de um objeto armazenado, leia-o, modifique a cópia e grave-a novamente. O armazenamento não tem uma API para atualizações parciais.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Versionando formatos armazenados

Os formatos dos dados do aplicativo mudam com o tempo. Armazenar um campo version permite migrar ou descartar dados antigos quando o formato evolui.

saveJSON("prefs", { version: 2, theme: "dark" });

Verificação rápida

Armazenando objetos no Armazenamento da Web.

Recapitulação

O armazenamento contém strings; portanto, aplique JSON.stringify aos objetos antes de salvá-los e use JSON.parse ao lê-los. Proteja a análise com try/catch e forneça valores padrão. Lembre-se de que o JSON descarta funções e undefined, além de transformar datas em strings. Atualize dados aninhados lendo, modificando e gravando novamente; considere também usar versões nos formatos armazenados.

Perguntas Frequentes

A aula “Armazenando objetos com JSON” é grátis?

Sim — o texto completo de “Armazenando objetos com JSON” é 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 objetos com JSON”?

Serialize objetos para armazená-los e recuperá-los. 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 3 de 4.

Quanto tempo leva a aula “Armazenando objetos com JSON”?

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