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

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

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

在前两个步骤中，我有两个表单。每个表单都有一个“下一步/上一步”按钮 我需要能够从步骤2返回到步骤1，并且在字段中仍然有步骤1的表单数据。我是javascript新手，如有任何帮助，将不胜感激。我不确定如何保存表单数据，然后在用户从步骤2返回时插入它

编辑： 我已经决定使用JS来隐藏/显示表单，请有人告诉我为什么我的变量永远不会到达currentStep==3；这在返回步骤1时会导致问题，因为currentStep值卡在2

var currentStep=1；
函数nextStep（）{
如果（当前步骤===1）{
$（“#petmain1”）.hide（）；
$（“#petmain2”）.show（）；
$（“#添加产品”）.show（）；
$（“#firstimage”）.hide（）；
$（“#secondimage”）.show（）；
currentStep=2；
console.log（“当前步骤为”+当前步骤）；
}否则如果（当前步骤===2）{
$（“#petmain2”）.hide（）；
$（“#添加产品”）.hide（）；
$（“#secondimage”）.hide（）；
$（“#petmain3”）.show（）；
$（“#第三页”）.show（）；
$（“#firstimage”）.hide（）；
currentStep==3；
console.log（“当前步骤为”+当前步骤）；
}
}
函数prevStep（）{
如果（当前步骤===2）{
$（“#petmain1”）.show（）；
$（“#petmain2”）.hide（）；
$（“#添加产品”）.hide（）；
$（“#firstimage”）.show（）；
$（“#secondimage”）.hide（）；
currentStep=1；
console.log（“当前步骤为”+当前步骤）；
}否则如果（当前步骤===3）{
$（“#petmain3”）.hide（）；
$（“#第三页”）.hide（）；
$（“#secondimage”）.show（）；
$（“#petmain2”）.show（）；
$（“#添加产品”）.show（）；
currentStep==2；
console.log（“当前步骤为”+当前步骤）；
}
}

您可以使用

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

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

在从第二步导航到第一步时，再次检查本地存储器中的值，并将其分配给第一个表单中的字段

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

---

您可以使用

会话存储

HTML

<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>

---

工作演示：

我认为您应该使用具有多个表单的向导或使用cookies来存储数据。您应该在同一页面中拥有所有表单，这样您就可以访问form@ShrikanthBuds是正确的，使表单位于同一页上，但在上一步和下一步的屏幕之外，当您想返回时，只需使用

display:none

更改边距-left属性better以隐藏表单。这是完美的工作，我发现这个演示$（document）.ready（function（）{var count=0；//要计数空白字段/*-----------验证函数-----------------*/$（“.submit\u btn”）。单击（function（event）{var radio\u check=$（'.rad'）；//按类名获取单选按钮var input\u field=$（'.text\u field'））；//获取具有相同类名text_字段和HTML标记textarea var text_area=$（'textarea'）；//验证将导致错误……）以及如何确定必须将哪个值放入哪个输入？@Jai您能详细说明一下吗

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...";
  }
}