javascript - 返回按钮/bfcache : Object hidden in DOM via jquery is visible again when going back?

Question

我的网页在第一次访问时会出现一个框。

在网站的其他部分，有“后退”按钮，当然还有浏览器后退按钮。

但是，当使用后退按钮(浏览器或 html)时，该框再次可见。

有没有办法保证返回时不再显示该框？即使使用 .remove() 完全删除对象也不起作用。

我在这里制作了一个 jsbin 示例:

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

首先，单击链接隐藏该框，然后单击第二个链接继续。

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(后退按钮):

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

Answer 1

一旦您重新加载页面，您通过 javascript 对 dom 所做的任何修改都会重置为其初始状态。因此，要么使用ajax(例如，我相信使用jquery.load)来避免重新加载整个页面，要么提供一个可以通过jquery检查的url参数(Get url parameter jquery Or How to Get Query String Values In js)

最后的解决方案是使用 cookie 保存信息。