Passo 4: Persistindo com localStorage
O painel fecha o círculo do curso: as despesas sobrevivem a um recarregamento de verdade, com o mesmo padrão de localStorage do projeto 3.
Estudar esta lição interativa →A última peça é a mesma do projeto 3: salvar() serializa o array de despesas inteiro com JSON.stringify e guarda no localStorage, e carregar() faz o caminho inverso com JSON.parse assim que a página abre, com as duas envoltas em try/catch para nunca derrubar o app se o navegador bloquear o armazenamento. salvar() roda logo depois de cada mudança no array (cada despesa nova), nunca só no final: navegadores podem fechar, travar ou perder a aba a qualquer momento, e esperar por um evento de "está fechando agora" para só então salvar arriscaria perder tudo se esse evento nunca chegasse a disparar.
Dois cuidados a mais nesta versão: carregar() confere com Array.isArray que o texto guardado é mesmo uma lista antes de usá-lo (o que está no localStorage pode ter sido alterado ou estar corrompido), e a chave tem um prefixo e uma versão (programandoai:despesas:v1) para não colidir com outro app que use o mesmo endereço. E a mensagem acima da lista só diz "recuperada(s)" quando havia mesmo algo salvo.
Pare um momento aqui e olhe para trás: este painel usa arrays de objetos (como as perguntas do quiz e os itens da lista de compras), validação antes de aceitar um dado (lista de compras e buscador de CEP), reduce para somar totais, filter para recortar dados e localStorage para persistir (os três últimos da lista de compras). Quase nada aqui é novo, é conhecimento que você já construiu, agora trabalhando junto num único projeto.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione despesas e filtre por categoria. Lembre: este ambiente isolado não guarda dados entre um Rodar e outro, e a mensagem acima da lista avisa isso.
Assim como no projeto 3, o preview acima bloqueia o localStorage e recomeça do zero a cada Rodar, então as despesas que você adicionar não voltam depois de um novo Rodar. O código de salvar() e carregar() é o que funcionaria numa página publicada: para ver o painel lembrando suas despesas, copie o código para um arquivo .html no seu computador, abra no navegador e recarregue a página depois de adicionar algumas.
Seu dashboard de despesas adiciona, valida, filtra, totaliza e lembra tudo isso entre visitas: um painel completo, exatamente do tipo que apps de finanças pessoais de verdade oferecem. Como desafio por conta própria, tente adicionar um botão de excluir despesa (reaproveitando o padrão de removerItem por id do projeto 3) e um campo de data em cada despesa.