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.

48

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:

Falar com professor - Tire a sua dúvida.
Inicie agora sua carreira de programador por apenas R$ 54,90/mês
Ainda está em dúvida? Experimente a plataforma durante 3 dias sem cartão. Faça um teste grátis
Conheça agora!
Benefícios
  • Suporte em tempo real
  • Certificado de autoridade
  • Exercícios para praticar
  • Estudo gamificado
  • Planos de estudo para cada carreira de programador

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar