如何在html的文本字段中保存数据？

Question

我创建了两个 html 页面。一页有姓名和年龄文本字段，第二页有母亲姓名和父亲姓名。每当我点击进入第二页的第一页中的下一个按钮时，如果我点击进入第一页的第二页中的上一个按钮但未显示数据。所以我希望该字段中的数据。

我想在输入内容之前查看字段内的数据...

Answer 1

您可以使用localStorage 来存储和检索值。

HTML

<form name="frm1" method="post"> 
  <table> 
   <tr><td>Enter Your Name:</td>
   <td><input type="text" id="name" name="name"></td></tr> 
                          ^^ id attribute added
   <tr><td>Enter Your Age:</td>
   <td><input type="text" id ="age" name="age"></td></tr> 
                          ^^ id attribute added  
   <tr>
   <td></td>
   <td>
     <a href="page2.html">
     <input type="button" id ="nextButton" value="Next">
                          ^^ id attribute added
    </a></td> 
  </table>
 </form>

JS

// Check if local storage has previously stored value
// If there are values then populate relevent field with value.
document.addEventListener("DOMContentLoaded", function(event) {
var getStoredName = localStorage.name;
var getStoredAge = localStorage.age;
console.log(getStoredName ,getStoredAge);
      if(getStoredName !==undefined || getStoredAge !== undefined){
      document.getElementById("name").value=getStoredName;
      document.getElementById("age").value=getStoredAge;
      }

})

// Set local storage on click of next button

var getNextButton = document.getElementById("nextButton");  

getNextButton.addEventListener("click",function(){
    localStorage.name=document.getElementById("name").value;
    localStorage.age=document.getElementById("age").value;
    })

EXAMPLE

Answer 2

想想你的问题：

• 您需要转到第二页吗？你能把所有四个输入都放在同一个表单上吗？您可以使用 Javascript 更改“页面”而不是实际导航到不同的页面吗？这些都是解决您问题的好方法。
• 用户返回页面时输入的数据是否需要存在？如果表单正在将其提交到服务器，那么只会让用户感到困惑，因为它仍然存在并且他们可能会错误地提交两次。
• 最后，如果您确实需要数据仍然存在，则必须使用 持久性数据存储，例如 cookie 或 localStorage。如果您想了解如何做到这一点，请查看 this answer，它描述了使用 cookie / localStorage 的过程并讨论了哪种方法最好。