Passo 3: Salvando com localStorage
A grande virada do projeto: os itens passam a sobreviver a um recarregamento de verdade, guardados no navegador.
Estudar esta lição interativa →Chegou a peça que dá nome ao projeto. O localStorage, como você viu no módulo Ponte, guarda pares de chave e valor, mas sempre como texto. Nosso array de itens é uma estrutura de dados, não texto, então antes de salvar precisamos serializar: JSON.stringify(itens) transforma o array inteiro numa única string de texto que representa fielmente os dados. Na volta, JSON.parse(texto) faz o caminho inverso, reconstruindo o array de objetos original a partir dessa string.
A função salvar() chama setItem a cada mudança na lista (adicionar, e no próximo passo, remover). A função carregar() roda uma única vez, ao iniciar a página, lendo o que já estava salvo (ou devolvendo um array vazio, se nunca houve nada salvo).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione itens e veja a lista e o total atualizarem. A mensagem acima da lista conta o que este ambiente isolado consegue (e não consegue) guardar.
O preview acima roda dentro de um mini-navegador isolado (por segurança), que bloqueia o localStorage e começa do zero a cada Rodar. Por isso, aqui, os itens não sobrevivem de um Rodar para o outro, e a mensagem acima da lista avisa isso em vez de fingir que guardou. O código está certo: é exatamente o que funcionaria numa página publicada de verdade. Para ver a persistência acontecer, copie o HTML e o JavaScript do editor para um arquivo lista.html no seu computador, abra no navegador, adicione itens e recarregue a página (F5): eles voltam.
Repare que salvar() e carregar() estão envoltas em try/catch. Alguns navegadores bloqueiam o localStorage em certas condições (modo privado, por exemplo), e sem o try/catch essa única falha derrubaria o app inteiro. Com ele, o pior caso é o app funcionar sem persistência, nunca travar.