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

Question

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

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

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

 _________
|         |
|    0    |
|_________|

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

哈希网址

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

 _________
|         |
|    2    |
|_________|

但这是糟糕的用户体验。仅加载第 2 页。用户无法向上滚动以查看较旧的内容。考虑到后退按钮占网络流量的 50%（雅各布尼尔森研究），我不能只加载页面 0、1 和 2，因为这会使服务器过载。

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

score 1 · Accepted Answer

鉴于您的问题的限制，我能想到的唯一可行的解决方案是缓存前一页的高度，然后在用户向上滚动时加载它们。这将填充您的向上滚动并允许您在用户查找时触发负载。此外，如果您想更花哨一点，我会尝试找出一种冻结滚动条的方法，以防止用户向上滚动到上一个未加载的页面。这样他们就不能一次触发多个页面加载。

score 1 · Accepted Answer

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