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;
}
}
}
});
As it is a college job you can store a JSON object in string format in the Storage. Or if you want something like database search on SQL Web that modern browsers support.
– Thiagosilr
Which part do you already know and which part do you doubt? Your question involves several questions, among them 3 fundamental: recover whole form data, serialize the data, persist in Storage location. It would be better to [Dit] the question and solve one step at a time, opening new questions to the next steps as you solve each.
– Bacco
@Bacco take a look now please?
– Lucas Pletsch
See the reply at https://answall.com/questions/293265/comorsalvar-objetos-javascript-no-formato-json-na-localstorage-e-depois-desseri/293275#293275
– user60252