如何在html中将数据从一个页面传递到另一个页面？

Question

我需要将表单数据从一个 HTML 页面传递到另一个 HTML 页面。 共有 5 页。 用户按以下顺序输入数据：

第一页：姓名

第二页：重量

第三页：高度

第四页：出生国

第五页：显示所有输入的数据，并作为ajax请求发送到数据库。

我知道我可以以一种形式获取用户数据并且不需要多个页面，但是这个要求是我的项目所独有的，它必须是上面提到的方式。 我曾尝试将数据作为 URL 参数传递，但在第一页之后，该变量被第二页的变量覆盖。 请帮助我是 HTML 和 js 的新手。

Answer 1

sessionStorage 和 localstorage 都可以使用。 您可以根据您的要求选择其中任何一个

sessionStorage ，示例：

  sessionStorage.setItem('name', 'my name');
  let data = sessionStorage.getItem('name');
  sessionStorage.removeItem('name');
  sessionStorage.clear();

本地存储：示例：

       save data: localStorage.setItem('Name', 'My name');
       get data : localStorage.getItem('Name');
       remove data from local : localStorage.removeItem('Name');

我希望这对你有用

Answer 2

你有可以展示的代码吗？ 就目前而言，这可能不是一个可以回答的问题。 但是，通常您可以将页面中的值存储在<input type="hidden"> html 标记中，并在下一次调用中使用该值。 最后，您可以通过 js 中的XMLHttpRequest()发出 ajax 请求，但是您需要像 PHP 或 Python 这样的后端脚本来处理与数据库的通信。 这是我可能会尝试的示例，假设您将表单数据发送到下面的假设页面：

<form action="height.html" method="GET">
    <input hidden="text" name="valuetopass" />
    <input type="submit" value="Submit" />
</form>

然后你可以像这样添加javascript：

var data = window.location.search; // You have parse after this point

数据现在中将包含您的网址与以前的形式值追加一个字符串，你需要分析它得到公正的价值，然后你就可以使用同一个呼叫设置你的下一个隐藏的输入值document.getElementsByName("valuetopasss");

Answer 3

HTML 本质上是无状态的，这意味着对页面的每个文件访问都是一个新世界。 要传递数据，您可以对 URL 中的数据进行编码，或者您需要一个在页面之间存储数据的后端。

另一种方法是一些浏览器会话存储。 如果您谈论的是单页应用程序，您可以将 JavaScript 与保存信息的对象一起使用。

Answer 4

你可以看看这个答案

描述了如何使用会话存储或本地存储或 URL 参数

但我真的建议你使用一种形式并构建像这个链接这样的向导形式

https://bootsnipp.com/snippets/eN4qy

https://www.w3schools.com/howto/howto_js_form_steps.asp

https://colorlib.com/wp/free-bootstrap-wizards/

Answer 5

您需要使用会话存储。 像这样将变量存储在会话存储中。

这是你的html...

<input type="text" id="name" >
<button onClick="SaveAndGo()">Next Page</button>

在您的 js 中使用此代码

<script>
function SaveAndGo()
{
var name = document.egtElementById('name').value;
 sessionStorage.setItem("name",name); //the second name is the variable name...    

}
</script>

对用户的所有其他属性（如体重、身高和国家/地区）使用相同的代码