Local Storage no JavaScript

Para que isso serve na prática?

• Fazer a página lembrar dados depois do recarregamento

• Persistir cadastros simples no navegador

• Guardar preferências e estados locais

• Usar rascunho temporário sem perder o que já foi digitado

Local Storage no JavaScript

Roteiro da aula

• O que é Web Storage
• Diferença entre localStorage e sessionStorage
• O que é JSON e por que ele aparece aqui
• Padrão certo para cadastro com memória + storage
• Exercícios introdutórios e desafios com fluxos distintos
• Erros comuns e boas práticas

Local Storage no JavaScript

Web Storage

O que é Web Storage?

• É uma API do navegador para guardar pares de chave e valor
• Funciona no lado do cliente
• O valor salvo fica associado ao site atual
• O navegador devolve esses dados em formato de texto

localStorage.setItem('nome', 'Ana');
const nome = localStorage.getItem('nome');

Local Storage no JavaScript

localStorage ou sessionStorage?

Local Storage no JavaScript

Regra rápida para decidir

• Quer lembrar depois? localStorage

• Quer lembrar só nesta navegação? sessionStorage

• Quer guardar credencial real? storage não resolve segurança sozinho

Local Storage no JavaScript

O que é JSON?

• É um formato de texto para representar dados estruturados
• Organiza informações com chaves e valores
• É muito usado para troca e armazenamento de dados

{
    "nome": "Ana",
    "turma": "2AT"
}

Local Storage no JavaScript

Para que JSON é usado?

• Para trocar dados entre sistemas e APIs
• Para salvar estados e configurações em texto
• Para manter a estrutura de objetos e listas fora da memória
• Para servir de ponte entre o que o programa usa e o que precisa ser salvo

JSON não é um recurso do storage em si. Ele entra aqui porque storage guarda texto, não objetos prontos.

Local Storage no JavaScript

Por que JSON aparece aqui?

• Na memória, trabalhamos com arrays e objetos
• No storage, o navegador guarda texto
• JSON faz a ponte entre essas duas formas

const aluno = { nome: 'Ana', turma: '2AT' };

Esse objeto precisa virar texto antes de ser salvo.

Local Storage no JavaScript

JSON.stringify() para salvar

const alunos = [
    { nome: 'Ana', turma: '2AT' },
    { nome: 'Bruno', turma: '2AT' }
];

localStorage.setItem('cadastro-alunos', JSON.stringify(alunos));

• Vai da memória para o storage
• Converte a estrutura em texto JSON

Local Storage no JavaScript

JSON.parse() para reconstruir

const json = localStorage.getItem('cadastro-alunos');
let alunos = [];

if (json) {
    alunos = JSON.parse(json);
}

• Vai do storage para a memória
• Reconstrói o array ou objeto original

Local Storage no JavaScript

O fluxo correto para cadastro

1. Ler o storage no início da aplicação
2. Guardar o resultado em memória
3. Trabalhar com a memória durante a interação
4. Reescrever o storage quando a memória mudar
5. Renderizar a interface a partir da memória atual

Local Storage no JavaScript

Leia uma vez no começo

const STORAGE_KEY = 'cadastro-alunos';
let alunos = carregarAlunos();

function carregarAlunos() {
    const json = localStorage.getItem(STORAGE_KEY);

    if (!json) {
        return [];
    }

    return JSON.parse(json);
}

Esse carregamento acontece na inicialização, não a cada clique.

Local Storage no JavaScript

Atualizou a memória? Reescreva o storage

function salvarAlunos() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(alunos));
}

function cadastrarAluno(aluno) {
    alunos.push(aluno);
    salvarAlunos();
    renderizarAlunos();
}

• A memória é a fonte principal da verdade
• O storage acompanha a memória atual

Local Storage no JavaScript

Cuidados

Hábitos que você deve evitar

• Reler o storage a cada cadastro
• Usar o DOM como lugar principal dos dados
• Atualizar a lista/objeto e esquecer de salvar de novo

Regra prática: lê no início, mantém em memória, regrava quando mudar.

Local Storage no JavaScript

Erros comuns de iniciantes

• Esquecer que getItem() pode devolver null
• Salvar objeto sem JSON.stringify()
• Fazer JSON.parse() sem validação
• Misturar chaves diferentes
• Ler storage de novo a cada clique

Local Storage no JavaScript

Boas práticas para não virar bagunça

• Use chaves claras e consistentes
• Carregue o storage na inicialização
• Trate a memória como fonte principal da verdade
• Regrave o storage sempre que o cadastro mudar
• Use sessionStorage quando o dado for temporário

Local Storage no JavaScript

Exercício 1: Perfil do Estudante

• Monta um cartão escolar com prévia em tempo real
• Usa objeto único com select, range, color e checkbox
• Salva e recarrega o perfil completo no localStorage
• Pasta: 05-local-storage/perfil-estudante/

Local Storage no JavaScript

Exercício 2: Cadastro de Alunos

• Simula conselho de classe com 3 notas por estudante
• Calcula média e situação (Aprovado ou Recuperação)
• Mostra painel de indicadores e tabela persistida
• Pasta: 05-local-storage/cadastro-alunos/

Local Storage no JavaScript

Exercício 3: Agenda de Contatos

• Organiza contatos em mural por categoria
• Permite marcar favoritos e remover individualmente
• Filtra por nome sem alterar a lista principal
• Pasta: 05-local-storage/agenda-contatos/

Local Storage no JavaScript

Exercício 4: Inscrição com Rascunho

• Guarda inscrições completas no localStorage
• Salva rascunho com sessionStorage durante o preenchimento
• Inclui oficinas em checkbox + justificativa com contador
• Pasta: 05-local-storage/inscricao-com-rascunho/

Local Storage no JavaScript

Desafios extras: agora o estado muda de forma

Os próximos exercícios não são só “formulário → lista”.

Eles treinam escolhas diferentes de modelagem:

• objeto como mapa de posições
• voto composto com soma e ranking
• timer que sobrevive ao recarregamento
• progresso de leitura por índice
• tentativa de quiz com ranking persistido

Local Storage no JavaScript

Extra 1: Mapa de Sala

• Usa um objeto como mapa de assentos
• Cada chave representa uma posição, como A-1
• Ocupa e libera lugares sem transformar tudo em lista
• Pasta: 05-local-storage/mapa-sala/

Local Storage no JavaScript

Extra 2: Urna de Prioridades

• Distribui exatamente 10 pontos entre propostas
• Impede voto duplicado por código
• Salva votos compostos
• Calcula ranking agregado a partir dos votos salvos
• Pasta: 05-local-storage/urna-prioridades/

Local Storage no JavaScript

Extra 3: Sessão de Foco

• Salva uma sessão de timer em andamento
• Recalcula o tempo restante depois de recarregar
• Trabalha com Date.now(), pausa e retomada
• Pasta: 05-local-storage/sessao-foco/

Local Storage no JavaScript

Extra 4: Trilha de Leitura

• Persiste livro escolhido e capítulo atual
• Navega por índice
• Salva anotações diferentes por capítulo
• Mostra progresso visual da leitura
• Pasta: 05-local-storage/trilha-leitura/

Local Storage no JavaScript

Extra 5: Ranking de Quiz

• Controla uma tentativa em memória
• Salva apenas o resultado consolidado no ranking
• Calcula percentual de acertos
• Ordena resultados persistidos
• Pasta: 05-local-storage/ranking-quiz/