javascript - 使用后退按钮保留表单数据

Question

有很多类似的问题，但似乎没有一个对我的情况有帮助。

我正在使用 Javascript 和 html 开发一个三步流程

我在前两个步骤中有 2 个表单。每个表单都有一个下一个/上一个按钮我需要能够从第二步返回到第一步，并且字段中仍然有步骤表单数据。我对 javascript 很陌生，我们将不胜感激。我不确定如何保存表单数据，然后在用户从第 2 步返回时插入它

编辑:我决定使用 JS 来隐藏/显示表单，请有人告诉我为什么我的变量永远不会到达 currentStep == 3;这在返回到第一步时会导致问题，因为 currentStep 值停留在 2

var currentStep = 1;

function nextStep() {

if (currentStep ===1){
		
        $("#petmain1").hide();
		$("#petmain2").show();
		$("#addproduct").show();
		$("#firstimage").hide();
		$("#secondimage").show();
		currentStep = 2;
		console.log("Current step is " + currentStep);
        
	}else if(currentStep ===2){
		
		$("#petmain2").hide();
		$("#addproduct").hide();
		$("#secondimage").hide();
		$("#petmain3").show();
		$("#thirdimage").show();
		$("#firstimage").hide();
		currentStep === 3;
		console.log("Current step is " + currentStep);
		
	}

}
function prevStep() {
	

if (currentStep ===2){
        $("#petmain1").show();
		$("#petmain2").hide();
		$("#addproduct").hide();
		$("#firstimage").show();
		$("#secondimage").hide();
		currentStep = 1;
		console.log("Current step is " + currentStep);
	}else if(currentStep === 3){
		$("#petmain3").hide();
		$("#thirdimage").hide();
		$("#secondimage").show();
		$("#petmain2").show();
		$("#addproduct").show();
		currentStep === 2;
		console.log("Current step is " + currentStep);
	}

}

Answer 1

您可以使用 localStorage

在从第一步导航到第二步时，您可以存储值

if(typeof(Storage) !== "undefined") {
     localStorage.setItem("someKey", $("#somField").val());
} else {
     //
}

再次从第二步导航到第一步，检查本地存储的值并将其分配给第一种形式的字段

$("#somField").val(localStorage.getItem("someKey"))