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.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
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.
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: