O projeto está inativo

Web Storage: Melhore a UX de forms grandes com Datasets locais

Neste exemplo veremos como armazenar informações num formulário de etapas utilizando o recurso LocalStorage da API Web Storage do HTML5.

50

Apresentação do projeto

Veremos um formulário, conforme apresentado nas Figuras 1 a 3, em que o usuário fornece as informações e as mesmas são salvas no Web Storage. No caso de recarregamento da página, fechamento do browser ou qualquer outra situação que possa fazer o usuário perder as informações que estão sendo preenchidas, o LocalStorage se encarrega de armazená-las.

Informações de perfil
Figura 1. Informações de perfil
Informações complementares
Figura 2. Informações complementares
Resultado no WebStorage
Figura 3. Resultado no WebStorage

O uso do LocalStorage é uma ótima alternativa aos cookies, só que com mais recursos, como por exemplo, um maior armazenamento para as informações a serem gravadas. O tamanho vai depender de cada navegador, mas a especificação recomenda que sejam 5MB, o que supera em muito o tamanho de 4KB oferecido por um cookie.

Sugestão de conteúdo:

Se você quiser aprofundar os seus estudos sobre Web Storage, recomendamos o seguinte curso:

PARA QUEM QUER SER
PROGRAMADOR DE VERDADE.
VAGAS LIMITADAS

de: R$ 658,80

por: 12x R$ 49,90

Em caso de dúvidas chame no whatsapp
Plano PRO
  • Acesso completo
  • Projetos reais
  • Professores online
  • Exercícios gamificados
  • Certificado de autoridade

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar