javascript - 如何记住一个表格被扩展？

Question

我的项目中有一个多步骤表单，其中的第一步有一个 javascript 扩展字段函数，用户可以在其中添加其他字段。如果用户进入下一步，数据当然会保存在Session中，直到最后提交。但是，不会记住扩展形式。如果用户从下一步返回，附加字段及其数据不会显示，更糟糕的是，如果附加字段中的数据无效，用户将看不到它，因为消息显示在消失的字段下方(我'm 使用 Cakephp 默认验证)。

有没有办法，比如将设置存储在 session 中，让它保持不变？

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

<span id="readroot" style="display: none">
<div class="row">
	<div class="col-lg-6">
		<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>						
	</div>
	<div class="col-lg-6">
		<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>
	</div>	
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
</span>
<span id="writeroot"></span>		
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="Add Field" />

Answer 1

您需要为您的页面实现 sessionStorage 或 localStorage。

localStorage - 存储没有过期日期的数据

sessionStorage - 存储一个 session 的数据(浏览器选项卡关闭时数据丢失)

在这里，我只是发布示例代码以帮助您完成您想要的任务。您只需遵循以下代码中的逻辑概念并在您的代码中实现。

还有一个仅包含 id 的示例，但您可以用其他方式实现它，这可以完全完成您的任务。

click here