JSON e Armazenamento

JSON

JSON (JavaScript Object Notation) é o formato mais comum para troca de dados na web.

JSON.stringify e JSON.parse

const usuario = {
  id: 1,
  nome: 'Maria',
  ativo: true,
  tags: ['admin', 'dev'],
  endereco: null,
  data: new Date(),
  funcao: () => 'admin' // ignorado: funções não são serializáveis
};

// Converter para string JSON
const json = JSON.stringify(usuario);
console.log(json);
// {"id":1,"nome":"Maria","ativo":true,"tags":["admin","dev"],"endereco":null,"data":"2026-01-15T10:00:00.000Z"}

// Com formatação
const jsonBonito = JSON.stringify(usuario, null, 2);
console.log(jsonBonito);

// Converter de volta
const obj = JSON.parse(json);
console.log(obj.nome); // 'Maria'
console.log(obj.data); // string ISO, não mais Date!

JSON com Replacer e Reviver

// Replacer: filtrar/transformar na serialização
const jsonFiltrado = JSON.stringify(usuario, ['id', 'nome', 'tags']);

const jsonComTransformacao = JSON.stringify(usuario, (chave, valor) => {
  if (chave === 'data') return new Date(valor).toLocaleDateString('pt-BR');
  return valor;
});

// Reviver: transformar ao fazer parse
const objRevived = JSON.parse(json, (chave, valor) => {
  if (chave === 'data') return new Date(valor);
  return valor;
});

Deep Copy com JSON

const original = {
  nome: 'João',
  endereco: { cidade: 'SP', uf: 'SP' },
  tags: ['dev']
};

// Deep copy (limitação: perde funções, undefined, Date, Symbol)
const copia = JSON.parse(JSON.stringify(original));
copia.endereco.cidade = 'RJ';

console.log(original.endereco.cidade); // 'SP' (não afetado)

Web Storage

localStorage e sessionStorage

// Salvar
localStorage.setItem('tema', 'escuro');
localStorage.setItem('usuario', JSON.stringify({ nome: 'Ana', id: 42 }));

// Ler
const tema = localStorage.getItem('tema');
const usuario = JSON.parse(localStorage.getItem('usuario'));

// Remover
localStorage.removeItem('tema');

// Limpar tudo
localStorage.clear();

// Tamanho
console.log(`${localStorage.length} itens salvos`);

// sessionStorage (mesma API, limpa ao fechar aba)
sessionStorage.setItem('carrinho_temporario', JSON.stringify({ itens: 3 }));

Storage Event

// Escuta mudanças em OUTRAS abas do mesmo domínio
window.addEventListener('storage', (e) => {
  console.log(`Chave: ${e.key}`);
  console.log(`Valor antigo: ${e.oldValue}`);
  console.log(`Valor novo: ${e.newValue}`);
  console.log(`Origem: ${e.url}`);
  console.log(`Storage: ${e.storageArea}`); // localStorage ou sessionStorage
});

Exemplo Prático

// Histórico de busca
function adicionarBusca(termo) {
  const historico = JSON.parse(localStorage.getItem('historico_busca') || '[]');
  historico.unshift(termo);

  // Manter apenas 10 itens
  if (historico.length > 10) historico.pop();

  localStorage.setItem('historico_busca', JSON.stringify(historico));
}

function getHistorico() {
  return JSON.parse(localStorage.getItem('historico_busca') || '[]');
}

function limparHistorico() {
  localStorage.removeItem('historico_busca');
}

Cookies

// Ler todos os cookies
console.log(document.cookie);

// Definir cookie
document.cookie = 'tema=escuro; path=/; max-age=86400; SameSite=Lax';

// Cookie com data de expiração
const data = new Date();
data.setDate(data.getDate() + 30);
document.cookie = `token=abc123; expires=${data.toUTCString()}; path=/; Secure; SameSite=Strict`;

// Remover cookie
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

// Parser simples de cookies
function getCookie(nome) {
  const match = document.cookie.match(new RegExp(`(^| )${nome}=([^;]+)`));
  return match ? decodeURIComponent(match[2]) : null;
}

FormData

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const formData = new FormData(form);

  // Iterar
  for (const [chave, valor] of formData.entries()) {
    console.log(chave, valor);
  }

  // Para JSON (envio via API)
  const dados = Object.fromEntries(formData);
  console.log(dados);

  // FormData suporta arquivos
  const arquivo = formData.get('avatar');
  console.log(arquivo.name, arquivo.size, arquivo.type);
});

Lab: Carrinho de Compras

Crie um carrinho de compras que persiste em localStorage com JSON. Adicione/remova itens e calcule o total.

# Abra o HTML, adicione itens, feche e reabra
# Os itens devem persistir

const CARRINHO_KEY = 'carrinho';

function carrinhoGet() {
  return JSON.parse(localStorage.getItem(CARRINHO_KEY) || '[]');
}

function carrinhoAdicionar(produto) {
  const itens = carrinhoGet();
  const existente = itens.find(i => i.id === produto.id);
  if (existente) {
    existente.quantidade += produto.quantidade || 1;
  } else {
    itens.push({ ...produto, quantidade: produto.quantidade || 1 });
  }
  localStorage.setItem(CARRINHO_KEY, JSON.stringify(itens));
}

function carrinhoRemover(id) {
  const itens = carrinhoGet().filter(i => i.id !== id);
  localStorage.setItem(CARRINHO_KEY, JSON.stringify(itens));
}

function carrinhoTotal() {
  return carrinhoGet().reduce((acc, i) => acc + i.preco * i.quantidade, 0);
}

JSON é a língua franca da web. localStorage é para dados que precisam persistir. Cookies são para autenticação e rastreamento.