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

Question

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

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

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

index1.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 中。

index2.php:

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

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

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

在 tutorial website (example 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() 返回的内容，而不是实际的文本值本身，并且您不能将对象放置在到本地存储。要解决此问题，请单独执行变量声明和文本更新步骤。

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

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