Is it possible to save <form> forms in localStorage with pure Javascript?

Question

I’m a beginner in Javascript and I’m making a prototype application for a college job, and I didn’t want to use a database or anything, because it’s not worth it, I just need to test the functioning of the GUI.

In my application, I have a form, and would like to save it in localStorage.

But I need to save the form so that your fields are linked to the form lo local Storage. As if it were a Json object with its attributes. (I also can’t save in Json).

I imagined something like this:

<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>

And the function triggered when submitting the form:

function guardaFormulario(){

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

}

Answer 1

localStorage is very simple to use you use setItem() to store:

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

And the getItem() to recover this value:

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

In the W3school has a few more examples

An example of use:

<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>

To save a JSON object use stringfy() and parse():

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

var objeto = JSON.parse(localStorage.chave);
console.log(objeto.subchave1);

Answer 2

With localStorage you can store the data of a form in JSON string format.

Using FormData you store all the form elements in an object, then making a for you add the entries in an object, will be in this format, being the pairs name => value:

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

To recover the data, you use the JSON.parse to convert the data saved in localStorage in JSON object and use a for to populate the form with the values saved.

In that for you search the form elements by your name and enter its value. But you also need to check the type (type) of the elements, because some will receive value (input, select, button, textarea...) and others checked (radio and checkbox).

I wrote the code below that will do all this.

At this link you can test on a basic form.

Code:

// 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;
         }

      }

   }
});