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：询问：单人间，单击另一页上的“立即预订”按钮

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

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

我应该如何用localstorage做到这一点？

P.S。我对此很陌生，因此请使其简单易懂。谢谢！！！

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

****最新更新*** 我已经在我的product.html中添加并编辑了将建议代码（谢谢！：D）

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上第一个产品的按钮时，第二个值仍然保留。

2页之间的数据传输。其他页面已预先填写

2 个答案: