使用 javascript 将输入值显示在没有提交按钮的情况下到另一个页面

Question

我正在尝试将输入值的结果显示到另一个页面。但此输入没有提交按钮。

因此，我正在使用keyup来存储输入数据。

我有 2 页，index1.php页和index2.php

页索引1.php：

<form>
<input type="text" name="nameValidation" id="nameValidation" placeholder="Name">
</form>
<div id="display"></div>
<script>
$(function() {
$('#nameValidation').keyup(function() {
var nameValisession = $('#display').text($(this).val());
sessionStorage.setItem("nameValiSession", nameValisession);
}); 
}); 
</script>

因此，我在这里所做的是使用keyup函数来获取最新结果并将其存储为变量。然后，我将该变量分配给sessionStorage。

索引2.php：

<div id="display"></div>
<script>
var nameValisession = sessionStorage.getItem("nameValiSession");
document.getElementById("display").innerHTML = nameValisession;
</script>

在这里，我只是尝试检索变量的值nameValisession

但是，这对我不起作用。如何将输入值从index1.php发送到index2.php？

在教程网站(示例 1(中，当我尝试他们的代码时，它非常适合我。

Javascript in Page 1:
var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);
Javascript in Page 2:
var favoritemovie = sessionStorage.getItem("favoriteMovie");
console.log(favoritemovie);

那么，有人可以指出我如何解决问题的正确方向吗？

Answer 1

问题是nameValisession将保存一个 jQuery 对象，因为这是从text()返回的，而不是实际的文本值本身，并且您不能将对象放入 localStorage。若要解决此问题，请分别执行变量声明和文本更新步骤。

我还建议使用input事件而不是keyup，因为它还可以捕获通过鼠标添加的内容：

$(function() {
$('#nameValidation').on('input', function() {
var nameValisession = $(this).val();
$('#display').text(nameValisession);
sessionStorage.setItem("nameValiSession", nameValisession);
}); 
});