Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
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.

35

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:

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.