将输入表单数据发送到不同页面上的登录表单(HTML/js)

Question

我有一个两部分登录，您可以在第一页输入用户名，然后第二页通过window.open()打开，我想将第一页的用户名数据自动填充到第二页的用户名字段中。

这是我的代码(第1页(：

const $document = $(document);
const $login = $("#login");
const $loginBox = $("#loginbox");
const $formElement = $(`
<div class="loginContainer">
<label for="userNameBox"><b>Username: </b></label>
<input type="text" class="userName"id="userNameBox" placeholder="Enter Username"required="required">
<input type="button" class="loginButton" id="loginButton" value="Login"/>
</div>
`);
$document.on("click", "#loginButton", function() {
const $userNameBox = $("#userNameBox");
if ($userNameBox.val() !== "") {
window.open('secondPage.com','_blank');
} else {
alert("Please Enter a Username.");
location.reload();
}
});
$('.login').click(function(e) {
if ($loginBox.children().length === 0) {
$loginBox.append($formElement);
}
$("#loginbox").show();
event.preventDefault();
return false;
});

第二个页面只是一个带有用户名和密码字段的标准登录页面，设置方式类似于<input type="text" id="USERNAME2" name="USERNAME2" placeholder="username" class="text_field item" >

我可以使用会话cookie以某种方式将表单数据发送到第二页吗？

Answer 1

作为后端开发人员，我们将临时信息存储在会话中，您可以在这里获得将会话存储在js中的帮助当加载下一个页面时，您可以使用相同的进程加载会话数据。

// Save data to sessionStorage
sessionStorage.setItem('dataStored', data.xhr.response);
// Get saved data from sessionStorage
var data = sessionStorage.getItem('dataStored');
// Remove saved data from sessionStorage
sessionStorage.removeItem('dataStored');
// Remove all saved data from sessionStorage
sessionStorage.clear();