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

Question

我正在制作一个无限滚动的网站。也就是说，当用户滚动到页面底部时，一个新的内容 block 将附加到底部。它与 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

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