Back button / bfcache: Object hidden in DOM via jquery is visible again when going back?

Question

I have a webpage with a box that appears on the first visit.

In other parts of the site, there are 'back' buttons, and also, of course, the browser back button.

However, the when using the back button (browser or html), the box is visible again.

Is there a way to ensure that the box will not be displayed again when going back? Even removing the object completely with .remove() doesn't work.

I've made an example jsbin here:

http://jsbin.com/losilu/2/

First, click the link to hide the box, then click the second link to go forward.

HTML:

  <div id="hide-on-back">
    Make this go away
  </div>
  <a href="#" id="hide-box">1. Click First To Hide</a><br/>
  <br/>
  <a href="http://jsbin.com/tipup/1/">2. Go Forward</a>

JS:

$(document).ready(function(){
  $('a#hide-box').click(function(e){
    e.preventDefault();
    $('#hide-on-back').fadeOut();
  });
});

HTML/JS (Back Button):

<a id="go-back" href="#" onclick="function(){history.go(-1);}">Go Back</a>

Answer 1

As soon as you reload the page any modification you've done to the dom via javascript gets reset to its initial state. So, either you use ajax (eg with jquery.load I believe) to avoid getting the whole page reloaded or you provide a url parameter which you can check for via jquery ( Get url parameter jquery Or How to Get Query String Values In js )

Last solution would be saving the information using cookies.