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 加载的内容。当页面重新加载时，您可以向服务器检查之前的页面状态。

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

HTML5 添加了pushState() 方法来更改浏览器历史记录。请参阅 Mozilla 文档 here。 pushState() 不会导致页面重新加载。