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