如何从表单中检索值以供以后使用？答案

【问题标题】：How do I Retrive values from my form to be used later?如何从表单中检索值以供以后使用？
【发布时间】：2020-04-20 00:51:43
【问题描述】：

我使用 Javascript 和 html 创建了一个表单，它看起来像这样：

function testResults (form) {
    var TestVar = form.inputbox.value;
    var formData = $('#vibhu').serialize();
    formData = JSON.stringify(formData);
    if (window.localStorage) {
    localStorage.setItem('formData', formData);

<h1 class="title">Create Event</h1>
<FORM NAME="myform" ACTION="" METHOD="GET"><BR>
Event Name: <INPUT TYPE="text" NAME="name" VALUE=""><P>
Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value=""><P>
Event Location: <INPUT TYPE="text" NAME="location" VALUE=""><P>
Event Notes<INPUT TYPE="text" NAME="notes" VALUE=""><P>

我试图在另一个网页上使用

<script language="JavaScript">
    document.getElementById("result").innerHTML = 
localStorage.getItem("myForm");
}
</script>

如何才能检索此信息并将其作为事件在另一个页面上显示给用户？

【问题讨论】：

标签： javascript html forms input

【解决方案1】：

如何使用 localStorage？

要存储项目，请使用localStorage.setItem("valuename", "data");。
要获取项目的价值，请使用localStorage.getItem("valuename");。

这是一个例子：

<FORM NAME="myform" ACTION="" METHOD="GET"><BR>
Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><P>
Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><P>
Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><P>
Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><P>
<button onclick="myFunction()" type=submit>Submit</button>
</form>
<script>
   document.getElementById('input1').value = localStorage.getItem("EventName");
   document.getElementById('input2').value = localStorage.getItem("EventDateAndTime");
   document.getElementById('input3').value = localStorage.getItem("EventLocation");
   document.getElementById('input4').value = localStorage.getItem("EventNotes");
</script>

<script>
   function myFunction() {
      localStorage.setItem("EventName", document.getElementById('input1').value);
      localStorage.setItem("EventDateAndTime", document.getElementById('input2').value);
      localStorage.setItem("EventLocation", document.getElementById('input3').value);
      localStorage.setItem("EventNotes", document.getElementById('input4').value);
   }
</script>

这是一个现场演示：https://codepen.io/marchmello/pen/eYpdmQb

【讨论】：

这非常有用，谢谢@marshmallow，我将如何在不同的页面上显示这个本地存储数据？
@LachlanD 您是此页面的所有者吗？你能修改它的代码吗？

【解决方案2】：

使用submit 和action 属性form 像这样

<form name="myform" action="./html2.html" method="GET">
Event Name: <input type="text" name="name" value=""/>
Event Date and Time: <input type="datetime-local" name="date" value=""/>
Event Location: <input type="text" name="location" value=""/>
Event Notes: <input type="text" name="notes" value=""/>
<input value="submit" type="submit"/>
</form>

当你点击提交按钮时，页面同时跳转到html2.html?name=xxx&date=xxx&location=xxx...

【讨论】：