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.

1 - Apresentação do projeto

Neste exemplo veremos como o uso do LocalStorage, recurso da API Web Storage do HTML5, pode ser útil no armazenamento de informações fornecidas pelo usuário.

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:

Ficou com alguma dúvida?