ajax加载后缓存页面

Question

当用户滚动到页面底部时，我正在使用Jquery Ajax将更多内容加载到我的页面，如下所示：

$(window).scroll(function(){
   if($(window).scrollTop() == $(document).height() - $(window).height()){
      $.ajax({
        url: /* my url goes here */,
        cache: true,
        success: function(html){ /*append html to the bottom of page*/ }
      });
    }
});

问题是：当用户按下我页面中的某些链接然后按后退按钮时，之前加载的新内容会消失。 如何保留新内容？ 提前致谢。

Answer 1

单击后退按钮时，页面将返回到存储在浏览器历史记录中的原始状态。 Ajax倾向于“打破”后退按钮。

您可以在会话中保存一些标志，以说明您在最后一个视图中通过ajax加载了哪些内容。 页面重新加载时，您可以检查服务器上一页的状态。

或者，在使用： window.location.hash( "new-url-hash" )执行ajax调用时更改片段标识符。 您仍然需要使用您的javascript进行初步检查，以查看该网址的ID部分是什么。 如果您更改location属性的任何其他部分，页面将重新加载。

HTML5添加了pushState()方法来更改浏览器历史记录。 请在此处查看mozilla文档。 pushState()不会导致页面重新加载。