Como fazer seu app com IA lembrar as escolhas usando localStorage

Na aula anterior, você usou o Lovable para criar uma demonstração de agendamento para uma barbearia. Agora, vamos pedir que o app lembre duas escolhas fictícias, como serviço e horário, mesmo depois de atualizar a página.

A ideia é entender uma etapa intermediária antes de conectar um banco de dados. O exercício usa o armazenamento local do navegador e não cria agendamentos reais, não envia dados para a barbearia e não sincroniza escolhas entre aparelhos.

Vamos guardar somente escolhas fictícias no mesmo navegador. Não salve dados reais de clientes, senhas ou chaves.

localStorage é um espaço de armazenamento do navegador associado ao site aberto. Um app pode gravar um pequeno valor e ler de novo depois, inclusive em outra sessão do navegador.

Esse armazenamento não é uma conta de usuário nem um banco de dados da empresa. Ele não envia informações para um servidor e não sincroniza automaticamente com outro aparelho ou perfil do navegador. A pessoa também pode limpar esses dados nas configurações do navegador.

Para este exercício, use apenas valores demonstrativos, como “Corte” e “Sábado, 10h”. Evite guardar nome, telefone, e-mail, senha, token ou qualquer informação pessoal. Para agendamentos reais, será necessário projetar um servidor, autenticação e regras de acesso.

Abra o projeto da barbearia e peça à IA para inspecionar a implementação atual antes de alterar arquivos. A instrução abaixo limita o escopo e pede que o app explique claramente onde as escolhas ficam guardadas.

No app de demonstração da barbearia, faça apenas estas mudanças:

1. Salve no localStorage somente o serviço e o horário fictícios escolhidos.
2. Use a chave centralstack:barbearia-demo:v1.
3. Ao abrir ou atualizar a página, recupere as escolhas e mostre-as no resumo.
4. Adicione um botão “Limpar demonstração” que apague esses dados e volte ao estado inicial.
5. Valide os valores recuperados contra as opções disponíveis no app. Se forem inválidos, mostre o estado inicial sem travar.
6. Não salve nome, telefone, e-mail, senha, token ou dados reais de clientes.
7. Não crie login, banco de dados, integração externa ou agendamento real.
8. Preserve o layout e os componentes existentes. Antes de editar, explique o que pretende mudar; depois, liste os arquivos alterados e como testar.

O navegador guarda textos. Para salvar um objeto com mais de um campo, o JavaScript o transforma em texto JSON. Na próxima abertura, o app lê esse texto e o converte de volta em objeto.

Este exemplo ilustra o caminho; no projeto real, peça ao Lovable para integrar a gravação com os controles já existentes e tratar valores inválidos.

const chave = "centralstack:barbearia-demo:v1";
const escolhas = { servico: "Corte", horario: "Sábado, 10h" };

localStorage.setItem(chave, JSON.stringify(escolhas));

const textoSalvo = localStorage.getItem(chave);
const escolhasRecuperadas = textoSalvo
  ? JSON.parse(textoSalvo)
  : {};

Abra a prévia do Lovable ou execute o projeto em um servidor local. Evite abrir o HTML diretamente pelo endereço file://: o comportamento do armazenamento local nesse tipo de endereço não é garantido pelos navegadores.

• Escolha um serviço e um horário fictícios e confira se aparecem no resumo.
• Atualize a página. As escolhas devem continuar visíveis no mesmo navegador e na mesma origem do site.
• Clique em “Limpar demonstração” e atualize a página de novo. O app deve voltar ao estado inicial.
• Abra a prévia em uma janela privada ou em outro navegador. As escolhas locais podem não estar disponíveis ali.
• Confira a tela e a conversa com a IA para garantir que não foram adicionados login, dados reais ou uma integração que você não pediu.

localStorage ajuda a demonstrar uma experiência no próprio navegador. Ele não serve para compartilhar agendamentos com uma equipe nem para garantir que duas pessoas não escolham o mesmo horário.

A próxima etapa da trilha é entender como o aplicativo pode conversar com um servidor. Depois, será possível planejar uma API e decidir como os dados reais serão armazenados e protegidos.