Guardar Formulario en LocalStorage

[Murkuz]

Hola a todos, queria saber si hay alguna forma SIMPLE de guardar un formulario con varios input y select, en el LocalStorage con todos los datos que se cargaron en cada input y select.

Lo que he echo hasta el momento es usar:

Código:

localstorage.setItem('form1',$('#form1').html(););

pero esto unicamente me guardar el html sin los datos que uno setea.

La idea en si es guardar los furmularios, son varios, y luego de finalizado el cargado de todos los datos realizar los submit correspondientes.
En si es como un proceso de alta de un cliente y en cada "pestaña" solicitar datos, con la idea de volver ATRAS por si se equivoco con algo (aca necesito el formulario con los datos que el cliente ingreso).

Bueno espero que se entienda lo que necesito, espero una pronta respuesta.

Saludos

[Alexis88]

Bienvenido a FDW.

Te va a tocar guardar dato por dato pues no hay manera de que puedas tomar los datos de todos los elementos del formulario con una sola instrucción.

Podrías hacer algo como esto:

Código Javascript:

var elForm = document.querySelector("#form1"), //O simplemente 'form1'
    valores = []; //Array en el que se guardarán los valores
 
[].forEach.call(elForm.elements, function(elemento){ //Recorro el conjunto de elementos
    valores.push(elemento.value); //Guardo el valor de cada elemento en el array
});
 
//Guardo todo de manera local
localStorage.form1 = JSON.stringify({
    elementos: elForm.innerHTML, //Los elementos del formulario
    id: elForm.id || "", //El 'id' del formulario o una cadena vacía
    method: elForm.method || "GET", //El método establecido o "GET"
    action: elForm.action || "", //La dirección hacia la que se enviarán los datos o una cadena vacía
    enctype: elForm.enctype || "", //El tipo de contenido del formulario o una cadena vacía
    datos: valores //El array con los valores de los elementos del formulario
});
 

Y para recuperarlo:

Código Javascript:

var guardado = JSON.parse(localStorage.form1), //Recupero todos los datos guardados
    form = document.createElement("form"); //Creo un nuevo formulario
 
form.id = guardado.id; //Le asigno el 'id' guardado
form.method = guardado.method; //Le asigno el 'method' guardado
form.action = guardado.action; //Le asigno el 'action' guardado
form.enctype = guardado.enctype; //Le asigno el 'enctype' guardado
form.innerHTML = guardado.elementos; //Le asigno los elementos guardados
    
//Asigno los valores a los elementos
for (var i = 0, els = form.elements, l = els.length; i < l; i++){
    els[i].value = guardado.datos[i];
}
 
document.body.appendChild(form); //Añado el formulario al documento
 

Como la cantidad de valores guardados debe de coincidir con la cantidad de elementos del formulario, uso un bucle que recorra al primer conjunto y, en cada iteración, asigno los valores a los campos.

Cabe recordar que para guardar localmente datos de múltiples tipos, lo aconsejable es guardarlos en un objeto literal y luego darle formato JSON (tal y como lo hice en este ejemplo). Para recuperarlos, hay que quitarle dicho formato y se podrá acceder a los valores guardados como se haría con cualquier objeto literal, ya sea mediante la notación por puntos o por corchetes.

Saludos

[NelsonJPG]

y porque no usas un plugin Jquery? tal vez Garlic.js?

[Murkuz]

Tengo una duda, corro el script pero me da error en la variable "elemento",
[].forEach.call(elForm.elements, function(elemento)

a que hace referencia ese valor pasado por parametro? porque no esta definida en ningun lado. gracias

[Alexis88]

Hace referencia a cada elemento del conjunto de nodos contenidos en elForm.elements que no es otra cosa que el conjunto de elementos del formulario.

Solo por si las dudas, el código debe de estar dentro de una función, la cual debe de ser ejecutada después de haber ingresado los valores en los campos del formulario.

Saludos