时间戳

首页 > 解决方案 > 2 页之间的数据传输。其他页面预填

javascript - 2 页之间的数据传输。其他页面预填

问题描述

这是第 1 页 product.html 中的 book now 按钮

 <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: Inquiry on: Single Room，当单击另一个页面上的“立即预订”按钮时

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

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

我应该如何使用本地存储来做到这一点？

PS我对此很陌生，所以请让它简单易懂。谢谢！！！

标签： javascripthtmllocal-storagewebpage

解决方案

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），然后读取您在上一页中存储的值，获取对输入框的引用并使用您从存储中读取的值更新其值。

推荐阅读