将本地存储数据携带到多个HTML中

Question

我有麻烦携带本地存储数据从这个表单到多个html。下面的代码运行良好(onload="setData()"在这两个html的主体中，用户将文本输入到表单中，当提交时，它将被传递到main2.html。但是，我需要四个提交按钮来携带数据到单独的html。

我理解这个函数是因为action="main2.html"在表单标签中。这显然意味着我不能让同一个表单将这些数据发送到不同的页面。是否有解决这个问题的方法，或者我需要为每个页面单独的表单?

发送页面HTML:

<form id="form" method="GET" action="main2.html">
<input
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button2"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button3"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button4"
type="button"
value="Submit"
onclick="submitForm()"
/>
</form>

发送页面JS

<script>
function submitForm() {
if (typeof localStorage != "undefined") {
localStorage.name = document.getElementById("name").value;
}
document.getElementById("form").submit();
}
</script>

接收页HTML

<div class="hey">
<h1 id="show" class="name-placeholder">Luke Jones's</h1>
</div>

接收页面JS

<script>
function setData() {
if (typeof localStorage != "undefined") {
document.getElementById("show").innerHTML = localStorage.name;
}
}
</script>

Answer 1

这可能非常混乱，但我通过听取上面的评论并删除表单，并为按钮添加JS函数将它们链接到单独的页面，从而使其工作。同时保持原始问题的发送和接收JS。

<input
method="GET"
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Page1"
onclick="myFunction1(); submitForm();"
/>
<input
class="button2"
type="button"
value="Page2"
onclick="myFunction2(); submitForm();"
/>

function myFunction1() {
window.location.href = "main2.html";
}
function myFunction2() {
window.location.href = "main3.html";
}