后退按钮/ bfcache：通过jquery隐藏在DOM中的对象在返回时再次可见？

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 保存信息。