Isaque Victor cursos gratuitosNesta aula
Um site mostra. Uma ferramenta guarda.
Agora saímos do site público e entramos na ferramenta interna: aquela coisa que a equipe usa todo dia e que hoje vive num caderno. O primeiro passo é um cadastro simples, com formulário, lista e botão de salvar.
- Pedir à IA um app de cadastro que roda só no navegador
- Entender onde os dados ficam e como não perdê-los
- Testar com dados inventados
Onde os dados ficam
Até aqui o navegador só lia arquivos. Agora ele reage: a pessoa digita, clica em "adicionar" e algo acontece. Esse "algo" é o JavaScript, a terceira peça da página. A grande pergunta de todo app com dados é: onde eles ficam?
| Lugar | Como é | Serve para |
|---|---|---|
| No navegador | Gaveta própria de cada site (localStorage). Sem servidor, sem custo. | Um balcão ou uma pessoa |
| Em arquivo | O app exporta e importa um arquivo | Backup e ponte para planilhas |
| Num servidor | Banco de dados na nuvem, com login | Equipe em vários lugares (fora do curso) |
Vamos usar as duas primeiras juntas: guardar no navegador e exportar para arquivo.
Cuidado
Dado sensível de terceiros não vai no navegador. Nome e telefone já são dado pessoal. Saúde, CPF e dados financeiros pedem profissional.
A gaveta tem três regras
- É por computador e por navegador. O que você cadastrou no Chrome do balcão não aparece no Firefox nem no celular.
- É por endereço. Abrir pelo arquivo e pelo site publicado são duas gavetas diferentes.
- Some quando o navegador é limpo. Por isso exportar é o backup.
Coisa de profissional
No Safari, a gaveta tem prazo. A Apple apaga todo o armazenamento que o site escreve, incluindo o localStorage, depois de sete dias de uso do Safari sem que a pessoa interaja com aquele site. Quem salva só no navegador pode perder tudo de uma ferramenta usada uma vez por mês. Web apps adicionados à tela inicial do iPhone têm contagem própria e ficam de fora. Moral: exportar não é opcional, e ferramenta de uso raro precisa de backup em arquivo.
O pedido para a IA
O pedido segue o padrão do curso: contexto, o que faz, regras técnicas, o que NÃO faz e explicação no fim. O "NÃO faz" importa: sem ele, a IA às vezes acrescenta campo de telefone "para facilitar" ou manda os dados para um serviço.
Exemplo real
Uma cozinha de marmitas anotava os pedidos num caderno e contava o que sobrava no fim do dia. A dona pediu uma página com formulário (cliente, prato, quantidade, hora) e uma lista que soma as quantidades por prato. Ficou no tablet da cozinha, com exportação toda sexta.
Testar com dado inventado
Cadastre cinco pedidos inventados e rode a bateria:
- Persistência: feche tudo e abra de novo. Os cinco continuam lá?
- Soma: o resumo bate com o que você cadastrou?
- Apagar: apague um do meio. Lista e soma se atualizam?
- Exportar: o arquivo baixa e abre legível?
- Campo vazio: o app avisa, ou adiciona uma linha em branco?
A IA constrói o caminho feliz. Os casos estranhos (campo vazio, número negativo) você precisa pedir.
Prática · 10 min
- Crie uma pasta nova, abra a ferramenta nela e cole o pedido abaixo, adaptado ao seu negócio.
- Cadastre cinco registros inventados e rode a bateria de testes.
- Peça as correções, uma por vez, e salve uma cópia como
index-v1.html.
Resumo
- JavaScript é o que acontece quando a pessoa interage.
- O localStorage é uma gaveta por computador, navegador e endereço.
- Exportar é o backup. Não guarde dado sensível de terceiros ali.
- Peça o "NÃO faz" e teste sempre com dado inventado.
Fontes
Lidas em 30 de outubro de 2026.
- WebKit. Full Third-Party Cookie Blocking and More: limite de sete dias para o armazenamento escrito por scripts.
Quiz da aula
Três situações para aplicar o que viu.