Как запомнить форму?

Question

У меня есть многоступенчатая форма в моем проекте, первый шаг которой имеет функцию расширения поля javascript, где пользователь может добавлять дополнительные поля. Если пользователь переходит к следующему шагу, данные, конечно, хранятся в сеансе до окончательного представления. Однако расширенная форма не будет запоминаться. Если пользователь возвращается с следующего шага, дополнительное поле и его данные не отображаются, что еще хуже, если данные в дополнительном поле недействительны, пользователь не увидит его, так как сообщение отображается под исчезнувшим полем (I 'm, используя проверку Cakephp по умолчанию).

Есть ли способ, как хранить настройки в сеансе, чтобы он оставался?

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

Вы должны реализовать либо sessionStorage или LocalStorage для вашей страницы.

localStorage - хранит данные, не имеющие срока годности

sessionStorage - хранит данные для одной сессии (данные теряются, когда ушко браузер закрыт)

Здесь я просто разместить пример кода для вашей помощи, через который u может выполнить вашу задачу желания. Вам просто нужно следовать логической концепции из кода ниже и реализовать в своем коде.

Существует также образец, который содержит только id, но вы можете реализовать его другим способом, который может полностью заполнить вашу задачу.

click here