我可以从缓存中加载后退按钮吗？

Posted 2023-05-09

【中文标题】我可以从缓存中加载后退按钮吗？

【英文标题】：Can i make the back button load from cache?

【发布时间】：2021-05-28 08:03:25

【问题描述】：

我正在开发一个显示帖子列表的项目。在列表的最后，有一个加载更多帖子的按钮，这个按钮会通过Ajax将另外12个帖子加载到列表底部。

我遇到了一个看起来很常见的问题，但是我在搜索了几天后找不到解决方案，因此我在这里问。

场景：

用户会点击按钮来加载更多帖子，他们这样做多少次并不重要，但是假设他们点击了足够多的时间来加载 100 多个帖子，然后他们决定点击在帖子上阅读完整帖子。

问题：

现在是问题所在。当用户单击“返回”按钮时，他们将返回帖子列表，但是，帖子列表将作为“新”请求重新加载页面，而不是显示上一次遇到该页面时已加载的 100 多个帖子。 这意味着，如果有人点击了帖子并想回到原来的位置，他们将不得不继续滚动到底部并多次点击“加载更多帖子”按钮，直到他们回到原来的位置是。

目标：

我想要实现的是用户将单击后退按钮，浏览器会将用户发送回他们所在的相同位置，包括滚动位置（它似乎已经这样做）和帖子数量已经加载的 - 基本上，在他们离开时将它们发送回帖子列表。

怎么办？

我可以在每次点击“加载更多”按钮时更新 URL，其中包含已显示的帖子数或按钮被点击的次数，然后当用户返回时，加载相同的内容基于 URL 的帖子数量或帖子“位置”（跳过 x 数量的帖子以到达他们所在的相同“位置”），但这可能导致非常大的 HTTP 请求（在一次，或者更多，如果他们加载更多）或者，当用户向上滚动时，他们将不得不点击另一个按钮来加载以前的帖子，这只是另一个按钮，由于网站的目的，我不想添加。

理想情况下，后退按钮将加载页面的缓存版本，这样它将导致相同的滚动位置，将加载相同的内容，并且不会涉及新的 HTTP 请求 - 它会显示他们离开时的页面。

还有：

该网站使用 PWA，不确定这是否有帮助，但仅供参考，因为它有一些缓存选项。

有什么想法吗？

【参考方案1】：

我建议使用localStorage。

由于 HTTP 请求已经完成。为什么不将数据写入localStorage 以供将来使用。

我的建议是将数据保存在localStorage 中，在帖子页面的每个页面加载时，您将向您的服务器发出 1 个请求。然后，您将检查您的localStorage 中是否有匹配的条目。是的，这意味着您的localStorage 数据在服务器帖子列表中是最新的，然后当loaded 变量增加时，您将从localStorage 加载更多内容，直到显示来自localStorage 的所有帖子，然后您将返回向服务器发出 HTTP 请求以获取更多帖子并将它们保存在 localStorage

若要在用户返回页面时添加所需的帖子加载行为，应从 URL 参数 onload 中读取 loaded 变量

【讨论】：

所以这意味着当用户返回帖子列表时，他们仍然需要向下滚动并单击加载更多按钮，直到他们加载所有帖子，因为他们在离开前加载帖子列表，对吗？这个解决方案只会修复 HTTP 请求，对吧？

不，如果加载的参数在 URL 中可用（例如localhost:2000/posts?loaded=20），您将使用该参数来知道您将加载多少帖子

好的，我明白了。这是一个有趣的想法，不过，我对 localStorage 不是很熟悉，但据我了解，我会将每个帖子的数据存储为 key => value，意思是，对于 100 个帖子中的每一个（假设用户加载了 100 个）我必须保存每个作为 key => value 输出的帖子数据片段（帖子标题、帖子内容、海报 ID、海报个人资料图像等），然后当用户点击返回时，获取该数据，循环遍历它并使用 javascript 创建元素以输出帖子？

是的，但是您需要确保 localStorage 上的数据是最新的（没有发布新帖子），因此您发出我提到的 HTTP 请求以查找 localStorage 是否是最新的日期或否

好的，我明白了。谢谢你。我仍然想知道是否有一种方法可以利用缓存，因为这似乎是最简单的方法。我需要将相同的功能应用到其他几个地方，并且项目可能会更改，这意味着为所有这些不同的列表（例如帖子列表、配置文件列表等）设置 localStorage，如果有的话更改输出的内容，我需要每次更新 localStorage 脚本都是最新的。所以我想知道是否有更简单的方法。