Come ricordare un modulo è esteso?

Question

Ho un modulo multistep nel mio progetto, il primo passo del quale ha una funzione di estensione del campo javascript in cui un utente può aggiungere campi aggiuntivi. Se l'utente passa al passaggio successivo, i dati vengono naturalmente archiviati in sessione fino all'invio finale. Tuttavia, la forma estesa non verrà ricordata. Se l'utente torna dal passaggio successivo, il campo aggiuntivo e i relativi dati non vengono visualizzati, peggio ancora, se i dati nel campo aggiuntivo non sono validi, l'utente non lo vedrà, poiché il messaggio viene visualizzato sotto il campo scomparso (I sto usando la convalida predefinita di Cakephp).

C'è un modo, come memorizzare l'impostazione in sessione, per farlo rimanere?

var counter = 0; 
 
function moreFields(val1, val2, val3) { 
 
\t counter++; 
 
\t var newField = document.getElementById(val1).cloneNode(true); 
 
\t newField.id = ''; 
 
\t newField.style.display = 'block'; 
 
\t var newFields = newField.querySelectorAll('[name], [id], [for], [data-display]'); 
 
\t \t for (var i=0;i<newFields.length;i++) { 
 
\t \t \t var theNames = newFields[i].name 
 
\t \t \t if (theNames) 
 
\t \t \t \t newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]"; 
 
\t \t \t var theNames2 = newFields[i].id; 
 
\t   if (theNames2) 
 
\t    newFields[i].id = theNames2 + counter; 
 
\t   \t console.log(newFields[i].id); 
 
\t   var theNames3 = newFields[i].htmlFor; 
 
\t   if (theNames3) 
 
\t    newFields[i].htmlFor = theNames3 + counter; 
 
\t   \t //console.log(newFields[i].htmlFor); 
 
    \t \t var theNames4 = newFields[i].dataset.display; 
 
\t   if (theNames4) 
 
\t    newFields[i].dataset.display = theNames4 + counter; 
 
\t   \t console.log(newFields[i].dataset.display); \t 
 
\t \t } \t \t \t 
 
\t var insertHere = document.getElementById(val2); 
 
\t insertHere.parentNode.insertBefore(newField,insertHere); 
 
}

<span id="readroot" style="display: none"> 
 
<div class="row"> 
 
\t <div class="col-lg-6"> 
 
\t \t <div class="form-group required"> 
 
      <label for="Student1Grade">Grade</label> 
 
      <select name="grade" data-display="#display_student_1_grade" class="form-control" id="Student1Grade" required="required"> 
 
       <option value="">Please Select</option> 
 
       <option value="1">Grade 1</option> 
 
       <option value="1">Grade 2</option> 
 
      </select> 
 
     </div> \t \t \t \t \t \t 
 
\t </div> 
 
\t <div class="col-lg-6"> 
 
\t \t <div class="form-group"> 
 
      <label for="Student1Gender">Gender</label>  
 
      <select name="gender" data-display="#display_student_1_gender" class="form-control" id="Student1Gender"> 
 
       <option value="1">Male</option> 
 
       <option value="2">Female</option> 
 
      </select> 
 
     </div> 
 
\t </div> \t 
 
</div> 
 
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 
 
</span> 
 
<span id="writeroot"></span> \t \t 
 
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="Add Field" />

Answer 1

è necessario implementare sia sessionStorage o localStorage per la tua pagina.

localStorage - memorizza i dati con una data di scadenza

sessionStorage - memorizza i dati per una sessione (i dati vengono persi quando la scheda del browser viene chiuso)

Qui sto solo scrivendo codice di esempio per il vostro aiuto attraverso il quale puoi fare il tuo desiderio. Hai solo bisogno di seguire il concetto logico dal codice sottostante e implementarlo nel tuo codice.

C'è anche un esempio che contiene solo id ma è possibile implementarlo in un altro modo che possa riempire completamente il tuo compito.

click here