Se você está começando a estudar JavaScript e já encontrou termos como JSON, JSON.stringify(), JSON.parse() e localStorage, talvez tenha surgido uma dúvida:

Para que tudo isso serve na prática?

Uma das melhores maneiras de entender JSON é acompanhar o caminho percorrido pelos dados dentro de uma aplicação.

Neste projeto, vamos construir um Cadastro de Alunos utilizando HTML, CSS e JavaScript. Os dados preenchidos no formulário serão transformados em um objeto JavaScript, convertidos para JSON e armazenados no navegador utilizando o localStorage.

Depois, vamos fazer o caminho contrário: recuperar os dados armazenados, converter o JSON novamente para um objeto JavaScript e apresentar as informações na interface.

O fluxo principal será:

Formulário → Objeto JavaScript → JSON → localStorage → JSON.parse() → Objeto → Interface

É justamente acompanhando esse caminho que conceitos que parecem isolados começam a fazer sentido.

---

🎥 Aula completa: JSON para Iniciantes na Prática

Este artigo acompanha a aula completa do canal Desvendando o Código, na qual desenvolvemos o projeto passo a passo.

JSON para Iniciantes na Prática | Crie um Cadastro com HTML, CSS, JavaScript e localStorage

Durante a aula, você poderá acompanhar a construção do projeto e entender não apenas como escrever o código, mas principalmente por que cada etapa é necessária.

---

O que você vai aprender

Durante o desenvolvimento do projeto, trabalharemos conceitos importantes do JavaScript e do desenvolvimento Web:

• criação de formulários com HTML;
• captura de elementos utilizando o DOM;
• eventos com addEventListener();
• evento submit;
• preventDefault();
• captura e validação dos dados;
• objetos JavaScript;
• propriedades de objetos;
• JSON;
• JSON.stringify();
• JSON.parse();
• localStorage;
• setItem();
• getItem();
• removeItem();
• persistência de dados no navegador;
• manipulação da interface com JavaScript;
• organização e testes durante o desenvolvimento.

O objetivo não é simplesmente fazer um cadastro funcionar.

A ideia é entender como os dados percorrem a aplicação.

---

O que é JSON?

JSON significa:

JavaScript Object Notation

Apesar do nome possuir JavaScript, o JSON não é exclusivo do JavaScript.

Ele é um formato textual utilizado para representar e transportar dados e aparece constantemente no desenvolvimento de aplicações Web.

Um JSON pode ter uma estrutura semelhante a esta:

{
  "nome": "Ana Souza",
  "idade": 15,
  "curso": "DS",
  "email": "ana@email.com"
}

Observe que temos informações organizadas utilizando pares de chave e valor.

Temos:

nome  → Ana Souza
idade → 15
curso → DS
email → ana@email.com

Essa organização facilita o transporte e o armazenamento das informações.

---

JSON e objeto JavaScript são a mesma coisa?

Essa é uma dúvida extremamente comum para quem está começando.

Eles podem parecer muito semelhantes visualmente, mas precisamos entender a diferença.

Um objeto JavaScript poderia ser:

const aluno = {
    nome: "Ana Souza",
    idade: 15,
    curso: "DS",
    email: "ana@email.com"
};

Podemos acessar uma propriedade:

console.log(aluno.nome);

Resultado:

Ana Souza

Já quando transformamos essas informações em JSON, estamos trabalhando com uma representação textual desses dados.

Por exemplo:

{
  "nome": "Ana Souza",
  "idade": 15,
  "curso": "DS",
  "email": "ana@email.com"
}

Essa diferença será importante daqui a pouco.

---

Por que transformar um objeto em JSON?

Imagine que nossa aplicação possui este objeto:

const aluno = {
    nome: "Ana Souza",
    idade: 15,
    curso: "DS",
    email: "ana@email.com"
};

Enquanto estamos trabalhando dentro do JavaScript, conseguimos acessar tranquilamente:

aluno.nome

ou:

aluno.email

Mas existem situações em que precisamos transportar ou armazenar esses dados.

É aí que o JSON começa a fazer sentido.

No projeto da aula, utilizaremos JSON para armazenar os dados no localStorage.

Em aplicações maiores, você encontrará JSON frequentemente na comunicação entre:

Front-end → API → Back-end

e:

Back-end → API → Front-end

Por isso entender JSON é fundamental para quem pretende avançar posteriormente para APIs REST, Node.js, Express, React e desenvolvimento Full Stack.

---

Criando o formulário de cadastro

Nosso projeto começa com um formulário contendo informações do aluno.

Teremos dados como:

• nome;
• idade;
• curso;
• e-mail.

O usuário preenche essas informações na interface.

Nesse momento, os dados ainda estão nos elementos HTML.

Precisamos fazer o JavaScript capturá-los.

---

Capturando elementos do HTML com JavaScript

Uma das maneiras de acessar elementos da página é utilizando:

document.querySelector()

Por exemplo:

const formCadastro = document.querySelector("#formCadastro");
const inputNome = document.querySelector("#nome");
const inputIdade = document.querySelector("#idade");
const inputCurso = document.querySelector("#curso");
const inputEmail = document.querySelector("#email");

Agora o JavaScript possui referências para os elementos que existem no HTML.

Isso permitirá ler os valores digitados pelo usuário e manipular posteriormente a interface.

---

Trabalhando com o evento submit

Quando temos um formulário HTML, normalmente existe um botão responsável pelo envio das informações.

Podemos monitorar esse evento:

formCadastro.addEventListener("submit", (event) => {

});

Quando o usuário enviar o formulário, a função será executada.

Porém, existe um detalhe importante.

O comportamento padrão do formulário pode provocar o recarregamento da página.

Neste projeto não queremos isso.

---

Para que serve preventDefault()?

Utilizamos:

event.preventDefault();

Assim:

formCadastro.addEventListener("submit", (event) => {

    event.preventDefault();

});

O preventDefault() impede o comportamento padrão daquele evento.

Agora conseguimos capturar e manipular os dados antes que o formulário tente realizar seu comportamento convencional.

---

Capturando os valores dos inputs

Depois disso, podemos recuperar aquilo que foi digitado:

const nome = inputNome.value.trim();
const idade = Number(inputIdade.value);
const curso = inputCurso.value.trim();
const email = inputEmail.value.trim();

Observe alguns detalhes.

Utilizamos:

.trim()

para remover espaços desnecessários das extremidades.

Para idade:

Number(inputIdade.value)

fazemos a conversão para número.

São pequenos tratamentos, mas fazem parte da preparação dos dados antes de continuarmos.

---

Valide os dados antes de continuar

Antes de criar nosso objeto, precisamos verificar se as informações necessárias realmente existem.

Podemos fazer algo semelhante a:

if (!nome || !idade || !curso || !email) {
    exibirMensagem("Preencha todos os campos corretamente.", "erro");
    return;
}

O return é muito importante.

Se os dados forem inválidos, não queremos que o algoritmo continue executando as próximas etapas.

O fluxo deve parar naquele ponto.

Isso evita que outras partes do código tentem trabalhar com informações incompletas.

---

Validação também faz parte da segurança

Existe uma lição importante aqui.

Mesmo em um projeto simples, precisamos começar a pensar em validação de dados e segurança da aplicação.

O HTML pode realizar algumas validações.

O JavaScript pode realizar outras.

Em uma aplicação Full Stack, o Back-end também precisa validar aquilo que recebe.

Não devemos construir uma aplicação pensando:

“O Front-end já validou, então não preciso me preocupar.”

Cada camada deve cuidar de sua responsabilidade.

Essa mentalidade começa em projetos pequenos e acompanha o desenvolvedor quando ele passa a trabalhar com aplicações maiores.

---

Criando um objeto JavaScript

Depois de capturar e validar os dados, podemos criar nosso objeto.

const alunoAtual = {
    nome: nome,
    idade: idade,
    curso: curso,
    email: email
};

Ou utilizando a sintaxe reduzida:

const alunoAtual = {
    nome,
    idade,
    curso,
    email
};

Agora aqueles dados que anteriormente estavam separados nos campos do formulário estão organizados dentro de uma única estrutura.

Temos um objeto JavaScript.

---

Transformando objeto JavaScript em JSON

Chegamos a uma das partes mais importantes da aula.

Para converter nosso objeto para JSON, utilizamos:

JSON.stringify()

Exemplo:

const alunoEmJSON = JSON.stringify(alunoAtual);

Podemos também formatar a apresentação:

const alunoEmJSON = JSON.stringify(alunoAtual, null, 2);

Agora temos uma representação textual das informações.

Visualmente teremos algo semelhante a:

{
  "nome": "Ana Souza",
  "idade": 15,
  "curso": "DS",
  "email": "ana@email.com"
}

É aqui que conseguimos visualizar claramente a transformação:

OBJETO JAVASCRIPT
        ↓
JSON.stringify()
        ↓
JSON

---

Para que serve JSON.stringify()?

Guarde esta ideia:

JSON.stringify() transforma um valor JavaScript em uma string JSON.

No nosso projeto:

JSON.stringify(alunoAtual)

está preparando os dados para que possam ser armazenados no localStorage.

Essa mesma ideia aparecerá novamente quando você estudar comunicação entre diferentes partes de uma aplicação.

---

Exibindo o JSON na página

Para deixar o projeto mais visual, podemos apresentar o JSON gerado diretamente na interface.

Por exemplo:

resultadoJSON.textContent = alunoEmJSON;

Assim, o aluno consegue enxergar:

1. os dados digitados no formulário;
2. o objeto criado pelo JavaScript;
3. o JSON resultante.

Essa comparação visual ajuda muito a entender o conceito.

---

O que é localStorage?

O localStorage é um recurso do navegador que permite armazenar informações localmente.

Isso significa que podemos salvar dados e recuperá-los posteriormente.

Podemos visualizar essas informações utilizando as ferramentas do desenvolvedor do navegador.

No Chrome e navegadores semelhantes:

F12
→ Application
→ Local Storage

Ali conseguimos visualizar as chaves e valores armazenados pela aplicação.

---

Salvando JSON no localStorage

Para salvar uma informação utilizamos:

localStorage.setItem()

Exemplo:

localStorage.setItem("alunoCadastrado", alunoEmJSON);

Temos dois elementos importantes.

A chave:

alunoCadastrado

e o valor:

alunoEmJSON

Podemos imaginar:

alunoCadastrado → dados do aluno em JSON

---

Por que usamos JSON no localStorage?

Agora a ligação entre os assuntos começa a aparecer.

Temos um objeto:

const alunoAtual = {
    nome,
    idade,
    curso,
    email
};

Fazemos:

const alunoEmJSON = JSON.stringify(alunoAtual);

E depois:

localStorage.setItem("alunoCadastrado", alunoEmJSON);

Nosso fluxo ficou:

FORMULÁRIO
    ↓
OBJETO JAVASCRIPT
    ↓
JSON.stringify()
    ↓
JSON
    ↓
localStorage

Agora os dados estão armazenados no navegador.

---

Persistência de dados no navegador

Aqui acontece algo interessante.

Depois de salvar as informações no localStorage, podemos atualizar a página.

Os campos visuais podem desaparecer.

Mas isso não significa necessariamente que perdemos os dados.

Eles continuam armazenados no navegador.

Isso é persistência.

Nosso próximo desafio será recuperar essas informações.

---

Recuperando dados do localStorage

Para recuperar uma informação utilizamos:

localStorage.getItem()

Por exemplo:

const alunoJSON = localStorage.getItem("alunoCadastrado");

Agora recuperamos aquilo que estava armazenado.

Mas existe um problema.

Nós salvamos uma representação em JSON.

Precisamos voltar a trabalhar com um objeto JavaScript.

---

Para que serve JSON.parse()?

É aqui que entra:

JSON.parse()

Podemos fazer:

const aluno = JSON.parse(alunoJSON);

Agora conseguimos novamente acessar:

aluno.nome

aluno.idade

aluno.curso

aluno.email

Portanto:

JSON.stringify()
Objeto → JSON

e:

JSON.parse()
JSON → valor JavaScript

Essa relação é fundamental.

---

JSON.stringify() x JSON.parse()

Uma maneira simples de memorizar é:

Método	Função
JSON.stringify()	transforma o valor JavaScript em JSON textual
JSON.parse()	interpreta o JSON e recupera um valor JavaScript

O fluxo completo fica:

Objeto JavaScript
      ↓
JSON.stringify()
      ↓
JSON
      ↓
armazenamento/transporte
      ↓
JSON.parse()
      ↓
Objeto JavaScript

Entender esse caminho é muito mais importante do que simplesmente decorar os nomes das funções.

---

Exibindo novamente os dados do aluno

Depois do JSON.parse(), podemos utilizar normalmente as propriedades recuperadas.

Por exemplo:

nomeAluno.textContent = aluno.nome;
cursoAluno.textContent = aluno.curso;
emailAluno.textContent = aluno.email;

Agora fechamos o ciclo.

Os dados:

1. nasceram no formulário;
2. foram capturados pelo JavaScript;
3. formaram um objeto;
4. foram transformados em JSON;
5. foram armazenados;
6. foram recuperados;
7. voltaram a ser utilizados pelo JavaScript;
8. apareceram novamente na interface.

Esse é o verdadeiro aprendizado do projeto.

---

Removendo dados do localStorage

Também podemos apagar uma informação específica:

localStorage.removeItem("alunoCadastrado");

Depois disso, podemos limpar a interface:

formCadastro.reset();

e preparar novamente o formulário para uma nova utilização.

Assim, nosso projeto possui um pequeno ciclo de gerenciamento das informações:

CRIAR
↓
SALVAR
↓
RECUPERAR
↓
EXIBIR
↓
REMOVER

---

Teste cada etapa do projeto

Uma prática importante utilizada durante a aula é não construir dezenas de linhas para somente depois descobrir se alguma coisa funciona.

Faça uma pequena parte.

Teste.

Funcionou?

Continue.

Por exemplo:

Capturou os dados?
↓
TESTE

Criou o objeto?
↓
TESTE

Converteu para JSON?
↓
TESTE

Salvou no localStorage?
↓
TESTE

Recuperou?
↓
TESTE

Durante o próprio desenvolvimento da aula encontramos um pequeno problema relacionado ao nome de uma propriedade e conseguimos identificá-lo rapidamente justamente porque o projeto estava sendo testado por etapas.

Se deixássemos tudo para o final, teríamos muito mais código para investigar.

---

Use o DevTools durante o desenvolvimento

As ferramentas do desenvolvedor não servem apenas para usuários avançados.

Elas devem começar a fazer parte da rotina de quem está aprendendo.

Você pode utilizar:

F12

e acompanhar diferentes partes da aplicação.

O Console ajuda a identificar erros e testar informações.

A área Application → Local Storage permite visualizar exatamente aquilo que sua aplicação armazenou.

Não fique apenas olhando para o código.

Observe também o que o navegador está fazendo com esse código.

---

O que este projeto ensina além de JSON?

Apesar de o assunto principal ser JSON, o projeto conecta vários conhecimentos importantes:

HTML
 ↓
DOM
 ↓
Eventos
 ↓
JavaScript
 ↓
Objetos
 ↓
JSON
 ↓
localStorage
 ↓
Persistência

É justamente essa conexão que faz um projeto ser tão importante para quem está começando.

Quando estudamos cada assunto completamente separado, pode parecer que estamos acumulando comandos.

Quando desenvolvemos uma aplicação, começamos a perceber onde cada conhecimento entra.

---

JSON aparece somente no localStorage?

Não.

O localStorage foi escolhido neste projeto porque permite visualizar o conceito de forma simples, sem precisar criar imediatamente um Back-end ou banco de dados.

Mas JSON aparecerá novamente quando você avançar para desenvolvimento de APIs.

Um exemplo simplificado:

FRONT-END
   ↓
JSON
   ↓
API REST
   ↓
BACK-END

E na resposta:

BACK-END
   ↓
JSON
   ↓
FRONT-END

Por isso esse projeto funciona muito bem como preparação para assuntos posteriores como:

• consumo de APIs;
• fetch();
• API REST;
• Node.js;
• Express;
• React;
• bancos de dados;
• desenvolvimento Full Stack.

---

localStorage substitui banco de dados?

Não.

O localStorage é um armazenamento disponível no navegador e é extremamente útil em determinados cenários, estudos e aplicações.

Porém, ele não deve ser confundido com um banco de dados de uma aplicação completa.

Neste projeto, seu papel é excelente para entendermos persistência e transformação dos dados sem introduzir imediatamente toda a complexidade de Back-end e banco de dados.

Depois de dominar esse fluxo, podemos evoluir o mesmo raciocínio.

---

Próximos passos para evoluir o projeto

Depois de concluir a versão apresentada na aula, você pode transformar o projeto em algo maior.

Alguns desafios interessantes são:

1. Cadastrar vários alunos

Em vez de armazenar apenas um objeto, crie um array:

const alunos = [];

Adicione vários registros e salve a lista completa.

2. Criar uma tabela de alunos

Percorra os dados e gere dinamicamente uma tabela no HTML.

3. Adicionar edição

Permita selecionar um aluno e alterar suas informações.

4. Adicionar exclusão

Crie um botão para remover somente um aluno.

5. Criar busca

Permita procurar alunos pelo nome ou curso.

6. Substituir localStorage por uma API

Depois que o projeto estiver funcionando no navegador, crie um Back-end com Node.js e Express.

Nesse momento você perceberá que o conhecimento de JSON continuará sendo utilizado.

---

Resumindo o que aprendemos

Se você guardar apenas uma imagem mental desta aula, guarde esta:

FORMULÁRIO
     ↓
OBJETO JAVASCRIPT
     ↓
JSON.stringify()
     ↓
JSON
     ↓
localStorage
     ↓
JSON.parse()
     ↓
OBJETO JAVASCRIPT
     ↓
INTERFACE

JSON deixa de parecer apenas uma estrutura cheia de chaves, aspas e dois-pontos quando entendemos por que os dados precisam assumir aquele formato e para onde eles estão indo.

---

Conclusão

Aprender JSON com JavaScript fica muito mais simples quando conseguimos acompanhar dados reais percorrendo uma aplicação.

Neste projeto, começamos com informações digitadas em um formulário e percorremos todas as etapas necessárias para:

capturar → organizar → converter → armazenar → recuperar → converter novamente → exibir.

Durante esse caminho utilizamos conceitos fundamentais como DOM, eventos, objetos JavaScript, JSON.stringify(), JSON.parse() e localStorage.

Esses conhecimentos não ficam presos a este Cadastro de Alunos.

Eles criam uma base importante para posteriormente entender como aplicações Front-end conversam com APIs e Back-ends.

Se você está começando, não tente apenas decorar:

JSON.stringify()

ou:

JSON.parse()

Pergunte sempre:

De onde esses dados vieram?

Em que formato eles estão agora?

Para onde eles precisam ir?

Quando você consegue responder essas três perguntas, o código começa a fazer muito mais sentido.

---

🎥 Assista à aula completa

JSON para Iniciantes na Prática | Crie um Cadastro com HTML, CSS, JavaScript e localStorage

No vídeo você acompanha todo o desenvolvimento, os testes e a explicação de cada etapa do projeto.

Desvendando o Código — Prof. Marcos

Programação fica muito mais fácil quando você entende o que está acontecendo por trás do código.