Javascript 在页面之间来回移动时，它保留输入值，但不保留jQuery设置的文本

我有一个带有空文本输入、空跨度和以下代码的页面：

$('input').on('input', function(){
    $('span').text(this.value);
});

当我输入时，相同的文本出现在范围中。但是，当我转到同一浏览器选项卡中的另一个页面，然后再次返回时，输入字段仍然填充，但现在跨度为空

我如何使它在返回页面时保持输入的值

谢谢

编辑： 我想我已经找到了解决办法

$('input').on('input', function(){
    $('span').text(this.value);
}).not(function(){
    return this.value == '';
}).trigger('input');

---

如果您通过点击“后退”按钮或从本地硬盘浏览来返回页面，您所经历的行为是正常的——在这种情况下，您会看到页面的缓存版本。表单字段可以缓存它们的值，但是

span

本身没有“值”，它有内容，而该内容不被缓存

如果要通过单击链接或键入地址（导致HTTP请求的内容）返回页面，文本字段将不会显示上次的最后一个值，而是显示其默认值

除了已有的代码外，您只需要一个脚本，该脚本在页面准备就绪时立即启动，将

span

重置为

输入的值

// You must already have a document.ready event handler, so just add to that:
$(function(){

  // This will restore the span's content to the value of the textbox
  $('span').text($('input').val());

  // This is your original code that wires up the textbox to a click
  // event handler
  $('input').on('input', function(){
    $('span').text(this.value);
  });

});

我倾向于绑定window.popstate（）

我使用它来反序列化可能更改的查询字符串，但您可能会在此处使用它以达到相同的效果。
仅在
input
事件时更新范围。在页面加载
$（function（）{$（'span'）.text（$（'input'）.val（）；}）后手动触发它
not（）

方法调用似乎对您没有任何帮助。谢谢。它必须是一个单独的函数还是我可以以某种方式链接它？您可以在（'input change'）上使用

，

然后链接一个

触发器（'change'））

在事件处理程序之后。嗯，我不知道为什么，但这似乎不起作用。直接从控制台调用触发器可以起作用，但在返回页面时却不起作用。我不知道为什么这个建议会起作用，因为

输入

或

更改

事件都不会在页面加载时触发，而页面加载时您需要输入将值放回span中。在附加处理程序后，它不会调用trigger（）？

$(window).on("popstate", function (e) {
        //code to refill the span goes here.
});