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

Question

I have a page with an empty text input, an empty span and the following code:

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

When I type in the input the same text appears in the span. But when I go to another page in the same browser tab and then go back again, the input field is still filled in, but now the span is empty.

How can I make it so that when you go back to the page the span keeps the value of the input?

Thanks!

Edit: I think I've found the solution.

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

Answer 1

The behavior you are experiencing is normal if you are returning to the page by hitting the "back" button or browsing from your local hard drive - - you are seeing the cached version of the page in that case. Form fields can cache their values, but a span doesn't have a "value" per se, it has content and that content isn't cached.

If you were to return to the page by clicking a link or typing an address (things that cause an HTTP request), the text field will not show the last value from the previous time, it will show its default value.

In addition to the code you already have, you just need a script that fires off as soon as the page is ready that resets the span to the value of the input .

// 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);
  });

});

Answer 2

I tend to bind window.popstate();

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

I use it to deserialize a potentially changed querystring, but you could likely use it here to the same effect.