如何在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

想想你的问题：

• 你需要转到第二页吗？你能把所有四个输入放在同一个表格上吗？你可以改变＆＃34; page＆＃34;使用Javascript而不是实际导航到不同的页面？这些都是解决问题的好方法。
• 用户输入的数据在返回页面时是否需要在那里？如果表单正在将其提交给服务器，那么它只会让用户感到困惑，因为它仍然存在并且可能会错误地提交两次。
• 最后，如果确实需要数据仍然存在，那么您必须使用持久数据存储，例如Cookie或localStorage。如果您想学习如何操作，请查看this answer，其中介绍了使用cookies / localStorage的过程，并讨论了哪种方法最佳。