缓存 Javascript/jquery 事件

Question

不太清楚该叫什么，但这是我抽象的问题：

为什么有的浏览器不记得打开的内容而有的浏览器在往复的时候不记得了？

例如，

鉴于以下情况：

html

<h2>&raquo; <a href="#" id="clickMe">Click Me</a></h2>
<div id="hiddenContent">
    <h2> Meaty Filler </h2>
    <p>
       Bacon ipsum dolor sit amet deserunt venison dolor meatball laboris short loin dolore capicola prosciutto. Tongue cillum salami, drumstick strip steak do spare ribs ball tip proident short loin ullamco ex tempor. Fugiat labore in ut quis ribeye turducken pig beef. Corned beef ham proident, nisi adipisicing bresaola irure kielbasa pig. T-bone nisi ham hock consequat laborum est exercitation dolor shoulder biltong velit qui sunt. Ut chuck esse short ribs turducken, pork loin id.
    </p>
    <p>
Nulla sunt aute meatloaf drumstick pork. Drumstick deserunt capicola aliqua flank leberkas brisket consectetur. Pork belly meatloaf proident, deserunt tri-tip voluptate aliqua. Commodo minim consequat, shoulder tenderloin eiusmod laborum excepteur flank reprehenderit in.
    </p>
   &raquo; <a href="http://baconipsum.com/">  Get Me Some Bacon</a>
</div>
        ​

javascript/jquery

​​>

$('#clickMe').click(function(e) { 
   e.preventDefault();
   $('#hiddenContent').fadeToggle();        
})​

css

#hiddenContent {display: none; border: 1px solid #ccc; background: #fcfcfc; padding: 1em; margin: 2em; border-radius: .25em; box-shadow: 2px 5px 10px #DBDBDB;} 

#hiddenContent:hover { background: #FBFBFB; } 
h2 { font: 1.5em/1.75em Georgia, serif; } 
p { margin: 0 0 1em; font: 1em/1.25em Georgia, serif; text-align: justify; } 
a { color: #444; text-decoration: none;} 
a:hover { text-decoration: underline; color: #222; }​

当我点击“Get Me Some Bacon”并点击返回按钮时，Chromium 和 IE8 不会记得 #hiddenContent 是打开的，不再隐藏，但 firefox 会。理想情况下，我更愿意模仿 firefox 的行为，但不确定我是否能够。这可能吗？

here is a NON WORKING jsfiddle。 当您回击时，它不会工作，因为 jsfiddle 会显式重新加载页面，但在我的（基于 struts - java 的）Web 应用程序中，我已将响应设置为显式缓存。

Answer 1

听起来您希望浏览器记住页面上在页面加载后返回时发生的变化。 Firefox 的页面缓存在某些情况下确实如此，但在其他浏览器中您不能指望它。

我认为您想要做的是在取消隐藏内容时更新 URL 哈希（或片段）。这将在浏览器的历史记录中添加一个新条目。

然后在同一页面上，您要检查页面加载时的哈希以确定是否显示隐藏内容。

$('#clickMe').click(function(e) { 
    e.preventDefault();
    window.location.hash = 'show'
    $('#hiddenContent').fadeToggle();        
})​

并添加这个

$(document).ready(function() {
    if(window.location.hash == 'show')
        $('#hiddenContent').show();
});

然后，当您回击时，#show 将出现在 URL 中。准备就绪后，您可以检查该值并显示内容。

Answer 2

看起来这可能是不可能的（或者至少以某种方式始终保证可以工作），因为它是依赖于浏览器的行为。 Chromium 和 IE 中可能有一些设置可以用来模仿 Firefox 的行为，但这些设置是浏览器用户的域，因此在很大程度上不受您的控制。

也看看这个相关的问题：Does back/forward in the browser change javascript variables?