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

How do I save an infinite stack of AJAX content when a user leaves the page?

本文关键字：无限 保存 堆栈 内容 AJAX 用户 离开      更新时间：2023-09-26

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

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

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

 _________
|         |
|    0    |
|_________|

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

哈希网址

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

 _________
|         |
|    2    |
|_________|

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

本地存储

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

与其将

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

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

相关文章：