2

Sou iniciante em Javascript e estou fazendo um protótipo de aplicação para um trabalho da faculdade, e não queria utilizar banco de dados nem nada, pois não vale a pena, preciso apenas testar o funcionamento da GUI.

Na minha aplicação, eu tenho um formulário, e gostaria de salvá-lo no localStorage.

Mas eu preciso salvar O formulário de forma que seus campos fiquem vinculados ao formulário lo local Storage. Como se fosse um objeto Json com seus atributos. (Também não sei salvar em Json).

Eu imaginei algo assim:

<form onsubmit="return guardaFormulario();">
        <div>
            <label for="nome"> Nome: </label>
            <input type="text" id="nome" />
        </div>
        <div>
            <label for="agencia"> Agência: </label>
            <input type="text" id="agencia" />
        </div>

        <div class="button">
            <button type="submit">Enviar sua mensagem</button>
        </div>

    </form>

E a função acionada ao submeter o formulário:

function guardaFormulario(){

   /*De alguma forma que eu não sei
 Guardo o formulário com seus atributos no local Storage */

}
4
  • 1
    Como é um trabalho de faculdade você pode armazenar um objeto JSON no formato string na storage. Ou se você quiser algo parecido com banco de dados pesquisa sobre Web SQL que os navegadores modernos suportam.
    – Thiagosilr
    Commented 22/04/2018 às 16:40
  • 1
    Qual parte você já sabe e qual tem dúvida? Sua pergunta envolve várias questões, entre elas 3 fundamentais: recuperar dados do form todo, serializar os dados, persistir no local storage. Seria melhor editar a pergunta e resolver uma etapa por vez, abrindo novas questões para os passos seguintes à medida que for resolvendo cada um.
    – Largato
    Commented 22/04/2018 às 18:23
  • @Bacco dá uma olhada agora por favor? Commented 22/04/2018 às 18:47
  • Veja resposta em pt.stackoverflow.com/questions/293265/…
    – user60252
    Commented 22/04/2018 às 20:04

2 Respostas 2

2

O localStorage é bem simples de usar você usa o setItem() para armazenar:

localStorage.setItem("chave", "valor");
//Ou
localStorage.chave = "valor";

E o getItem() para recuperar esse valor:

localStorage.getItem("chave");
//Ou
localStorage.chave;

No W3School tem mais alguns exemplos

Um exemplo de uso:

<form>
  <input type='text' id='chave'>
  <input type='button' id='salvar' value='Salvar'>
</form>

<p id='mostrar'></p>

<script>    
    var entrada = document.getElementById('chave');

    var paragrafo = document.getElementById('mostrar');

    document.getElementById('salvar').addEventListener('click', function() {
      localStorage.chave = entrada.value;

      mostrar.innerText = localStorage.chave;
    });
</script>

Para salvar um objeto JSON use stringfy() e parse():

localStorage.chave = JSON.stringfy({subchave1 = "valor1", subchave2: true});

var objeto = JSON.parse(localStorage.chave);
console.log(objeto.subchave1);
13
  • Ok, mas a questão é como salvar o formulário. Para isso, eu poderia, ao invés de indicar uma página web no "action" do formulário, utilizar uma chamada de função que salva ele no localStorage? Como ficaria o código pra isso? Commented 22/04/2018 às 18:20
  • 1
    Editei a resposta com um uso. Não é necessário submeter o formulário, apenas adicione um ouvinte de evento, num botão por exemplo, e salve/busque no localStorage
    – Costamilam
    Commented 22/04/2018 às 18:36
  • 1
    então você pode fazer como o @Thiagosilr comentou, crie um objeto e salve ele como string: joão: "{chave1: true, chave2: 15.3, ...}"
    – Costamilam
    Commented 22/04/2018 às 18:47
  • 1
    Adiconei a resposta como manipular objetos JSON
    – Costamilam
    Commented 22/04/2018 às 18:57
  • 1
    Algo como localStorage.joao = {agencia: document.getElementById('agencia').value, conta: document.getElementById('conta').value}
    – Costamilam
    Commented 22/04/2018 às 19:18
1

Com localStorage você consegue armazenar os dados de um formulário em formato de string JSON.

Usando FormData você armazena todos os elementos do formulário em um objeto, em seguida fazendo um for você adiciona as entradas em um objeto, ficará neste formato, sendo os pares name => value:

{"nome":"fulano","email":"[email protected]" ... }

Para recuperar os dados, você usa o JSON.parse para converter os dados salvos no localStorage em objeto JSON e usar um for para popular o formulário com os valores salvos.

Nesse for você busca os elementos do formulário pelo seu name e insere o respectivo valor. Mas é preciso verificar também o tipo (type) dos elementos, porque alguns irão receber value (input, select, button, textarea...) e outros checked (radio e checkbox).

Escrevi o código abaixo que irá fazer tudo isso.

Neste link você pode testar em um formulário básico.

Código:

// pega o click do botão de submit do formulário
document.body.querySelector("button").addEventListener("click", function(){

   var form = document.body.querySelector("form"),
       data = new FormData(form),
       json = {}; // objeto que irá guardar os dados

   for(var dados of form){

      var typ = document.body.querySelector("[name='"+dados.name+"']").type,
          val = dados.value;

      if(typ == "radio"){
         val = document.body.querySelector("[name='"+dados.name+"']:checked").value;
      }else if(typ == "checkbox"){
         val = document.body.querySelector("[name='"+dados.name+"']").checked;
      }else if(typ == "select-multiple"){

         var mul = [],
             els = document.body.querySelector("[name='"+dados.name+"']").options;
            for(var x=0; x<els.length; x++){
               if(els[x].selected){
               mul.push(els[x].value);
               }
            }
         val = mul;
      }

      json[dados.name] = val;
   }

   localStorage.setItem("formulario", JSON.stringify(json));

});


// recuperação dos dados guardados no localStorage
document.addEventListener("DOMContentLoaded", function(){

   var formulario = localStorage.getItem("formulario");

   if(formulario){ // verifico se o localStorage existe

      var form = document.body.querySelector("form");

      formulario = JSON.parse(formulario);

      for(var dados in formulario){

         var tag = document.body.querySelector("[name='"+dados+"']").tagName,
             typ = document.body.querySelector("[name='"+dados+"']").type;

         if(tag.match(/INPUT|SELECT|TEXTAREA/) && !typ.match(/radio|checkbox|select-multiple/)){

            document.body.querySelector("[name='"+dados+"']").value = formulario[dados];

         }else if(typ == "checkbox"){

            document.body.querySelector("[name='"+dados+"']").checked = formulario[dados];

         }else if(typ == "select-multiple"){
            var mul = formulario[dados];

            for(var item of mul){
               document.body.querySelector("[name='"+dados+"'] option[value='"+item+"']").selected = true;
            }

         }else if(typ == "radio"){
            document.body.querySelector("[name='"+dados+"'][value='"+formulario[dados]+"']").checked = true;
         }

      }

   }
});

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .