Guardar Formulario en LocalStorage

[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