2页之间的数据传输.其他页面已预填充

Question

这是第1页product.html 中的"立即预订"按钮

<form name="booksr1" method="link" action="enquiry.html"><input type="button" value="Book Now" class="book" onclick="window.location.href='enquiry.html'" /></form>

我想在另一个页面enquiry.html上预先填充我想要的主题，例如RE:Enquiryon:Single Room，当点击上另一个网页上的"立即预订"按钮时

这是第2页输入的RE:查询代码。

<label for="RE: Enquiry on:">RE: Enquiry on:<span class="RequiredColor">*</span></label><br/>
<input type="text" id="Subject"/><br/><br/>

我应该如何使用本地存储？

附言：我对这个还很陌生，所以请让它简单易懂。谢谢！！！

Answer 1

StackOverflow不允许您从localStorage保存/读取，因此您无法单击按钮查看它的工作情况，但让我们试一试。可能有一些错误，已经晚了，但我希望我能解释清楚。

假设您有product.html:

function go() {
var room = document.querySelector('#room-select').value;
localStorage.setItem('room', room);
location.href="enquiry.html";
}

<label for="room-select">Choose a Room:</label>
<select id="room-select">
<option value="1">Single Room</option>
<option value="2">Double Room</option>
<option value="3">Triple Room</option>
</select>
<button onclick="go()">Submit</button>

您运行一个函数，获取选择框的值，将其存储在localStorage中，然后转到查询页面。

现在，您必须向enquiry.html添加一些脚本来读取值。

document.addEventListener('DOMContentLoaded', () => {
var room = localStorage.getItem('room');
var input = document.querySelector('#subject');
input.value = room;
});

<label for="subject">RE: Enquiry on:</label>
<input type="text" id="subject" name="name" required>

您必须等待页面加载(侦听事件DOMContentLoaded(，然后读取您在上一页上存储的值，获取对输入框的引用，并用您从存储中读取的值更新其值。

Answer 2

***最新更新***我已经将Will建议的代码(谢谢！！：D(添加并编辑到我的product.html，中

function room1() {
	var room = document.querySelector('#room-selector-one').value;
	localStorage.setItem("booking1", "Single Room(Fan)");
	location.href="enquiry.html";
}
function room2() {
var room = document.querySelector('#room-selector-two').value;
	localStorage.setItem("booking2","Single Room(AC)");
	location.href="enquiry.html";
}

以及我的enquiry.html.

document.addEventListener('DOMContentLoaded', () => {
var room = localStorage.getItem('booking1');
var input = document.querySelector('#subject');
	input.value = room;	   
});
document.addEventListener('DOMContentLoaded', () => {
var room = localStorage.getItem('booking2');
var input = document.querySelector('#subject');
	input.value = room;	   
});

但现在，出现了一个新问题。我可以将第一个产品值运行到enquiry.html页面，但当我编辑了第二个产品代码后，当我试图为第一个产品点击product.html上的按钮时，第二个值仍然保留。