Permitir que alguém pare e retome um formulário reduz perda de trabalho, mas exige decidir onde o rascunho fica, quem pode recuperá-lo e quando ele desaparece. Não salve automaticamente dados sensíveis em armazenamento acessível a JavaScript.
Escolha o mecanismo pela sensibilidade e pelo uso
| Opção | Retomada | Indicação e limite |
|---|---|---|
| Manter respostas na página sem salvar | Só enquanto a página continua aberta | Adequado a formulários curtos; avise antes de sair se houver alterações |
sessionStorage |
Na mesma aba/sessão do navegador | Somente rascunho não sensível; normalmente termina quando a aba fecha; não serve para outro dispositivo |
localStorage |
Após fechar e reabrir o navegador no mesmo perfil | Persistente no dispositivo; evite PII, documentos, dados financeiros/médicos e qualquer informação de alto risco |
| Rascunho no servidor com login | Entre sessões e dispositivos | Para formulários longos; controle autorização, expiração, retenção, exclusão e auditoria |
| Link de retomada | Sem login, em dispositivo compatível | Use token aleatório, opaco, com expiração/revogação e canal seguro; não coloque respostas nem PII na URL |
sessionStorage e localStorage são acessíveis a scripts da mesma origem. Uma vulnerabilidade XSS pode expor o conteúdo; guardar um segredo no navegador não equivale a protegê-lo. Quando não for possível evitar dados sensíveis, use uma arquitetura aprovada por segurança/privacidade e controles no servidor.
Desenhe o ciclo do rascunho
- Liste os campos que podem ser salvos e exclua credenciais, números de cartão, códigos de autenticação e dados que não sejam necessários.
- Explique antes de salvar: salvamento automático ou manual, onde retomar, em qual dispositivo, prazo, como apagar e o que acontece ao enviar definitivamente.
- Salve após pausa curta (debounce) e ao avançar de etapa; mostre estados “salvando”, “salvo às…” e “não foi possível salvar”. Preserve o texto digitado se a rede falhar.
- No servidor, associe o rascunho a uma sessão/usuário ou token de acesso com entropia alta; confira permissão em cada leitura/alteração, limite tentativas e configure expiração e exclusão.
- Versione o formato do rascunho para detectar formulário alterado. Se conflito ocorrer em duas abas, não sobrescreva silenciosamente a versão mais recente.
- Ao retomar, revalide todos os campos e confirme valores e arquivos antes do envio; o servidor continua responsável por validar e processar.
Para prototipar apenas uma preferência não sensível na mesma aba, uma chave de sessionStorage pode registrar a etapa atual; remova o rascunho ao enviar ou escolher “apagar”. Não use esse exemplo para dados pessoais de um formulário real. Segundo a MDN, Web Storage, o armazenamento local persiste no perfil e o sessionStorage é por aba. Consulte Formulários acessíveis — W3C WAI e o núcleo de controles e formulários.
Serviços de landing pages
Veja o escopo e os próximos passos do serviço relacionado a este tema.
Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.