当用户离开页面时，如何保存无限堆栈的AJAX内容？

Question

我正在创建一个无限滚动的网站。也就是说，当用户滚动到页面的底部时，新的内容块被附加到底部。它与Facebook非常相似。以下是加载3页的示例：

 _________
|         |
|    0    |
|_________|
|         |
|    1    |
|_________|
|         |
|    2    |
|_________|

当用户点击最后一页上的内容时，我会将它们带到单独的详细信息页面。但是，如果用户点击回搜索结果页面，我没有他们以前位置的记忆，必须再次加载第0页。

 _________
|         |
|    0    |
|_________|

我知道一些老派的方法可以解决这个问题，但每个方法都有一些严重的问题：

哈希网址

每次加载新页面时我都可以更新URL。例如：www.website.com/page#2。当用户进入详细页面并返回时，URL会告诉我最后加载的页面，所以我为他加载它：

 _________
|         |
|    2    |
|_________|

但这是糟糕的用户体验。仅加载第2页。用户无法向上滚动以查看较旧的内容。我不能只加载页面0,1和2，因为这会使服务器超载，因为后退按钮占网络流量的50％（Jacob Nielsen研究）。

本地存储

Cookie没有存储多页数据的存储容量。 Local Storage应该有足够的空间。一种想法是将所有加载的页面存储到本地存储中。当用户返回搜索结果时，我从本地存储加载而不是命中服务器。这种方法的问题在于我的大部分用户使用的浏览器不是support local storage（IE7）。

Answer 1

考虑到你的问题的限制，我能想到的唯一合理的解决方案是缓存先前页面的高度，然后在用户向上滚动时加载它们。这将填充您的向上滚动，并允许您在用户查找时触发加载。另外，如果你想要更加花哨一点，我会尝试找出一种冻结滚动条的方法，以防止用户向上滚动超过之前的卸载页面。这样他们就无法一次触发多个页面加载。

Answer 2

而不是完全将用户带到单独的详细信息页面，而不是仅仅隐藏主要滚动内容，通过Ajax / XMLHttpRequest()加载详细内容然后使内容可见？换句话说，就像Facebook如何做到这一点。我想你是否可以做到这一点取决于内容是什么，以及它是你正在设计和控制的东西，还是它是外在的东西。