Usando Web Storage HTML5 e servidor com JavaScript e PHP
Aprenda a recuperar os dados gravados no localStorage HTML5 do navegador com JavaScript e enviar para o servidor com PHP e AJAX.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
Faz um tempo que ensinei como criar um sistema de cadastros simples para funcionar sem internet, com localStorage do HTML, ideal para usar em eventos e captar leads.
Agora vou mostrar como você pode recuperar os dados gravados off-line e enviar para o servidor. O objetivo é listar os cadastros na tela com JavaScript e enviar para o servidor com PHP e AJAX, gravando os dados num arquivo texto.
Antes de começar você deve conferir o tutorial anterior e baixar todos os arquivos usados.
Se preferir, acesse "Como enviar dados localStorage HTML para o servidor com PHP e AJAX" no YouTube.
Exibindo os cadastros na tela
O primeio passo é criar o arquivo recuperar.html para exibir os cadastros gravados em localStorage e enviar para o servidor
usando AJAX. Crie dentro da tag HEAD o script a seguir:
<script>
function lerForm(){
for(cont = 1; cont <= localStorage.cont; cont++){
ficha = localStorage.getItem('cad_'+cont);
document.getElementById("cads").innerHTML += "Nome: " + ficha.split(";")[0] + ", " + "Idade: " + ficha.split(";")[1] + "<br>";
}
}
</script>O código foi feito da forma mais simples possível para facilitar o entendimento.
Depois que entender o que foi feito, você pode melhorar o código fazendo de uma maneira mais limpa e profissional usando vetores, JSON e AJAX com POST.
Foi feita uma função que deve ser carregada no <body onload="lerForm()">, ou seja, será executada depois do carregamento da página. Ela
vai ler os cadastros e exibir dentro de uma tag div HTML, <div id="cads"></div>, presente no body da página.
A função faz um loop pelo contador (cont) gravado em localStorage que mostra a quantidade de cadastros.
Cada cadastro tem a chave como "cad_X", então é feita a captura com getItem passando o nome de cada, onde
o X é substituido pelo contador, formando assim os nomes dinamicamente.
A variável ficha vai conter um cadastro, então os dados são enviados para a div com
innerHTML. Como o valor do cadastro está no formato "Nome;idade", é feito um split para
quebrar essa string em array, e depois selecionado o valor desejado com 0 para o nome e 1 para a idade.
Enviado os dados para o servidor
O próximo passo é complementar a função lerForm() criada anteriormente com as linhas a seguir. Elas
devem ser colocadas no final da função.
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "gravar.php?q=" + document.getElementById("cads").innerHTML, true);
xmlhttp.send();O código cria um objeto AJAX XMLHttpRequest para conseguir enviar os dados para o servidor. Ele
envia por GET o conteúdo da div com os cadastros em formato HTML puro, para o arquivo gravar.php do servidor.
Lembrando mais uma vez que o código pode ser melhorado com tratamento do retorno, entre outras coisas.
No arquivo gravar.php vamos ter o código que vai receber por GET o valor da div, depois criar
um arquivo chamado cadastros.txt e gravar os cadastros, como no código a seguir.
$fp = fopen("cadastros.txt", "w");
$escreve = fwrite($fp, str_replace("<br>","\r\n",$_GET['q']));
fclose($fp);O ponto de atenção no código é o str_replace que troca o <br> (quebra de linha HTML)
por \r\n que é a quebra de linha para o arquivo texto.
É isso! A ideia foi ser bem direto, então o código tá bem simples e resumido pra facilitar o entendimento dos iniciantes. Agora é com você reescrever o código de uma maneira mais profissional com JSON, por exemplo, e implementar novas funcionalidades.
Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!
