如何在HTML中将数据从一页传递到另一页？

Question

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

第一页：名称

第二页：重量

第三页：高度

第四页：出生国家

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

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

Answer 1

您有可显示的代码吗？就目前而言，这可能不是一个可以回答的问题。但是，通常您可以将一页中的值存储在<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

数据现在将包含一个字符串，其中包含您的url，并附加上一个表格中的值，您将需要解析它以获得just值，然后可以使用该值来设置下一个隐藏的输入值致电document.getElementsByName("valuetopasss");

Answer 2

我相信您可以使用HTML5 Web存储https://www.w3schools.com/html/html5_webstorage.asp

自从我接触html哈哈已经有一段时间了。抱歉缺少帮助

Answer 3

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

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

Answer 4

您可以看一下此answer

描述了如何使用会话存储或本地存储或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

sessionStorage和localstorage都将起作用。您可以根据需要选择任何一个]

sessionStorage，示例：

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

localStorage：示例：

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

我希望这会为您感到难过