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

Question

有许多类似的问题,但它们似乎都没有帮助我的情况.

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

我在前两个步骤中有两个表单.使用next/prev按钮我需要能够从第二步返回到步骤1,并且仍然在字段中具有步骤形式数据.我是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"))

Answer 2

您可以使用sessionStorage.

超文本标记语言

<form>
  Username : <input type='text' id='name'> <br />
  Password : <input type='password' id='password'> <br />
  <input type='button' onclick='storedata()' value='submit'>
</form>
<p id='res'></p>

JS

window.onload = function() {
  if (sessionStorage.name && sessionStorage.password) {
      document.getElementById("name").value = sessionStorage.name;
      document.getElementById("password").value = sessionStorage.password;
    }
};

function storedata() {
  if(typeof(Storage) !== "undefined") {
    var name = document.getElementById("name").value;
    var password = document.getElementById("password").value;

    sessionStorage.name = name;
    sessionStorage.password = password;

    document.getElementById("res").innerHTML = "Your datas restored";
  } else {
    document.getElementById("res").innerHTML = "Sorry, your browser does not support web storage...";
  }
}

工作演示：https://jsfiddle.net/d83ohf6L/