Formulários inteligentes

Quantas vezes você perdeu horas digitando informações em formulários da web e, de repente, o navegador fecha? Não devem ter sido poucas. O pior é que precisamos difitar tudo de novo ao reabrir a página. Isso pode acontecer por causa de uma série de fatores.

Os desenvolvedores web buscam há tempos por maneiras de resolver esse problema e tornar as experiências dos usuários em algo mais agradável. Uma solução para isso é garantir que, independentemente dos dados digitados pelo usuário, as informações serão salvas localmente, no próprio computador do visitante. Desta forma, mesmo se o navegador for encerrado por problemas ou a aba acidentalmente fechada, as informações continuam lá para quando o usuário visitar a página novamente.

Há muitas tecnologias para se armazenar dados offline. Até recentemente, o mais comum eram os cookies. Entretanto, há alguns problemas com seu uso. Eles tipicamente permitiam armazenar apenas alguns quilobytes de dados.

Neste tutorial usaremos a API Web Storage e, mais especificamente, localStorage, para armazenar dados do lado do cliente.

A API da W3C Web Storage define uma nova maneira de armazenar dados do lado do cliente, em pares chave-valor.

A API define dois mecanismos de armazenamento, localStorage e sessionStorage. O último lida com o armazenamento de dados para uma única sessão. Ao fechar a aba ou janela, os dados são apagados.

Entretanto, estamos mais interessados em armazenar as informações de modo persistente. Aqui entra o localStorage. Como localStorage lida com persistência, os dados armazenados ficam disponíveis mesmo quando o usuário fecha a aba ou a janela. Isso significa que da próxima vez que um usuário abrir sua aplicação web, as informações continuarão disponíveis em cada um dos campos do formulário.

A Web storage (que inclui localStorage e sessionStorage) possui cotas de armazenamento. A maioria dos navegadores oferece um padrão de 5 MB por site. Isso pode ser alterado, mas apenas se você extrapolar o limite. O navegador perguntará ao usuário se deseja aumentar o limite em mais 5 MB. Entretanto, não há como saber quanto espaço você ainda tem disponível.

Outra coisa a se notar é que localStorage e sessionStorage requere que os dados sejam armazenados como texto. Se você quiser armazenar um objeto, você precisa usar o método JSON.stringify() para isso, e JSON.parse() para revertê-lo ao objeto original quando você precisar.

Suporte dos navegadores

As versões mais recentes da maioria dos navegadores possui o suporte nativo ao ECMAScript 5, por isso, você pode usar essas funções nativamente. Caso um navegador não tenha suporte, você pode incluir o arquivo json2.js (disponível em json.org) para fornecer essas funções.

Como usar

Usar o localStorage é muito simples. Para armazenar um par chave-valor, usaremos uma função chamada setItem() e para obter o valor de uma chave em particular usamos a função getItem().
O seguinte código armazena o valor john na chave name:

localStorage.setItem(‘name’) = ‘john’;

O próximo trecho atribui o valor da chave ‘name’ (que é ‘john’) à variável fname.

var fname = localStorage.getItem(‘name’);

E este trecho remove a chave do localStorage:

localStorage.removeItem(‘name’);

Para limpar chaves, usamos a função clear(). A localStorage.clear() limpará todos os dados de locais de sua aplicação.

Nosso formulário

Vamos criar um rápido formulário de contato para um site:

formulario-inteligente1

Salvar dados localmente

Agora que criamos nosso formulário, queremos salvar as informações digitadas pelo usuário.

Nesse formulário, não queremos salvar a senha, por isso, vamos ignorar o campo relacionado a ela.

formulario-inteligente2

Aqui, foi usado o document.querySelector() por ser mais legível e bem suportado em navegadores modernos. Entretanto, se você preferir, é possível usar document.getElementByld. O que fizemos aqui é obter tudo o que foi informado em vários campos do formulário e, com a ajuda da função localStorage setItem(), armazenamos localmente usando um par chave-valor.

Agora que temos uma função para salvar os dados localmente, podemos executar essa função em intervalos regulares de tempo para que os dados sejam salvos periodicamente na máquina do usuário.

formulario-inteligente3

Neste caso, garantimos que a página salve as informações digitadas pelo usuário a cada cinco segundos.

Obtendo dados para preencher o formulário

Agora o formulário salva tudo o que for digitado em intervalos de cinco segundos. Então, precisamos garantir que o usuário terá os dados recuperados ao abrir a página novamente.

formulario-inteligente4

Executamos retrievedata() sempre que a página é carregada. Isso significa que a cada carregamento, ela verá se há dados previamente informados salvos no localStorage para os campos do formulário. Se houver, os dados salvos serão carregados nos respectivos campos. Caso contrário, o formulário será carregado normalmente, com os campos vazios.

Limpeza

Agora, o usuário teve sucesso e enviou os dados do formulário. Entretanto, quando eles voltarem ao formulário, verão o que foi digitado anteriormente, mesmo que o envio tenha tido sucesso.

O que pretendemos é que a página salve tudo o que o usuário digitar até o momento do envio do formulário. Quando houver sucesso no envio, precisamos limpar os dados de cada campo novamente. Para isso, temos o arquivo process.php:

formulario-inteligente5

Neste arquivo, fizemos o processamento dos dados enviados no formulário e, no fim de tudo, realizamos a limpeza dos valores salvos no localStorage para ‘Name’, ‘Email’ e ‘Comment’ para que, se o usuário voltar à página de contato, não veja o comentário que acabou de submeter com sucesso.

Indo além

É possível melhorar este formulário de outras maneiras. No momento, ele salva todas as informações a cada cinco segundos. Podemos usar algo como um evento oninput para salvar no localStorage, apenas quando a pessoa realmente digitar algo.

Conclusão

Ao usar o localStorage, é possível criar formulários que salvam os dados digitados pelos usuários em suas máquinas locais até que haja sucesso na submissão. Isso melhora muito a experiência do usuário, caso a aba seja fechada por acidente. O usuário verá que não perdeu seu precioso tempo e nem precisará digitar tudo novamente ao visitar a página mais tarde.

Para baixar os arquivos HTML, PHP e CSS utilizados nesse tutorial, clique AQUI

Artigo extraído da Revista W nº 141 pags, 54 a 56, da autoria de Shwetank Dixilwww.shwetankdixit.com

 

Receba o e-book com dois efeitos de texto em PHOTOSHOP

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.