Javascript 如何使HTML按钮既能将用户重定向到新的.HTML页面，又能使用.value保存表单输入的数据？

我创建了一个表单，用户可以在其中键入数据，这些数据在提交数据时保存在变量中。我正在请求一个解决方案，它既可以保存用户的数据，也可以在按下按钮时将用户重定向到一个新的.html页面

<button type="button" onclick="getInfo()">Submit</button>

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

---

我怎样才能做到这一点？真诚的，分散的。

也许你在寻找这样的东西：

function getInfo(){
    var firstname = document.getElementById("firstname").value
    var lastname = document.getElementById("lastname").value
    var adress = document.getElementById("adress").value
    var password1 = document.getElementById("password1").value
    var password2 = document.getElementById("password2").value
    localStorage['firstname'] = firstname; // store data into browser's storage
    window.location = 'http://overpage.html'; // change the browser's page

}

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

注:

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

您可以使用访问另一个页面上的数据

var firstnameNewPage = localStorage['firstname'];

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

---

查看

sessionStorage

如果您想让数据仅用于会话使用

您好，您可以像下面这样使用带有multiform属性的表单操作

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

---

首先，这不是您应该如何处理凭证和身份验证，但出于这个问题的考虑，我将忽略这一点

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

因为你的问题很广泛，可能有很多可能的答案。 所以我的回答是一般性的

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

以下是存储此数据并将其显示在其他页面中的一些方法：

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

将数据发送到服务器，以便存储在服务器的会话或数据库中，以便稍后检索（通过ajax调用或html表单）

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

将你的应用程序设为a，这样你所有的“页面”都可以共享一个状态，可以用来移动数据

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

Wikipedia中实现为SPA的javascript框架的一些示例：

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

AngularJS、Ember.js、Meteor.js、ExtJS和React

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

使用名为

会话存储

或

本地存储

的浏览器API。 它们可用于存储字符串的键值对，以便以后访问。 您还可以使用

JSON.parse

和

JSON.stringify

函数在其中存储JSON数据

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

---

我的建议：

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

从这些可能性来看，我想说选项3（

localStorage

）将是最容易实现的，例如：

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

  localStorage.setItem('first name', fname);

及

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

这将在浏览器中保存这些值

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">

---

然后你可以做

location.replace（'/path/to/other/page.html'）

，只要你在同一个域中使用这些值，就可以在另一个页面中加载这些值。

将数据保存在哪里？你的意思是保存这些变量并在另一个html页面中使用它们？这是不可能的，因为在新页面上，这些变量将不存在，或者没有您需要的值，如果不使用服务器端编程，我认为您只能在另一个页面中使用GET变量并通过JS获取它们，除了localstorage。按下按钮时，数据会保存在变量中，至少我相信是这样。举个例子：当用户输入她的/他的名字时，它将被存储在变量“firstname”中。它们只在脚本执行期间保存，完成后，它们不再有任何数据，也不再存在。t看看如果我使用选项2，我将如何实际实现它？你写的代码行，是选项二吗？它是一个单页应用程序，这是否导致无法重新加载到新页面？我需要哪些代码行来执行此操作？什么样的代码行可以让按钮既保存数据（我猜我已经完成了），又可以将用户重定向到新页面？1）我编辑了答案以澄清。2） 我展示的代码行是关于选项3（

localStorage

API）。要实现SPA，它实际上是一个不同的范围，编辑问题/答案可能太多了。我建议你选择一个javascript框架来解决这个问题和谷歌的东西，并且只有当你遇到问题时才能打开一个新的问题。3） 您现有的代码没有多大帮助，因为您只将数据保存到javascript变量中（在RAM/内存中），当您刷新页面时，所有数据都会被删除。您需要将数据保存到持久性内存中。好的，我认为最好的选择是学习JavaScript框架。对于初学者，你会推荐哪一个？我只有

Angular

方面的经验，而且我认为这不是一个对初学者友好的框架。从我现在看到的

React

和

Vue.js

对初学者来说似乎是最简单的。如果答案对您有帮助，请接受：）

<form id="form_name" action="yourhtmlname.html" method="post" class="pure-form" enctype="multipart/form-data">