如何处理单页应用程序中的分页？答案

【问题标题】：How to handle pagination in Single Page Application?如何处理单页应用程序中的分页？
【发布时间】：2014-06-15 18:48:53
【问题描述】：

在我的单页应用程序（Javascript (AngularJs) webapp）上，我正在显示一个分页项目列表。
我每页显示 10 个项目。

为了在这个页面在其他页面导航时随时保留用户打开的当前分页，我将当前页码放在浏览器的localStorage中。下面是一个工作流示例：

用户转到myItemsList.html。
他打开第 2 页涉及 url：myItemsList.html?page=2。
然后，他转到另一个页面：myOtherPage.html。
他返回最初指向 myItemsList.html 的链接，感谢 localStorage 直接显示页面 myItemsList.html?page=2 以便可能继续他的导航。

这是否会让用户感到困惑，可能希望将第 1 页视为新的起始导航。
如果我在列表顶部显示“Page 2”之类的标签，以警告他正在查看导航的前面部分，这不是 UX 友好的吗？

或者我应该完全避免持续当前分页吗？

如果我不保留当前查看的页面，可能会发生以下情况：

用户转到myItemsList.html。
他打开第2页涉及url：myItemsList.html?page=2
他在此页面（“显示”页面）中打开一个项目，导致：myItemsList.html?id=123
他单击浏览器的后退按钮，导致myItemsList.html 的刷新（从单页应用程序开始）。当前分页（第 2 页）将丢失，用户需要重新启动它才能继续其项目发现。

这看起来真的很敏感......
对于这样的用例，我应该选择什么策略？

【问题讨论】：

为什么不用history api？
这也可能是一个解决方案，但与此问题相关的许多答案都提到了 localStorage。我很想知道 localStorage 选择的策略。
我不相信 localStorage 在您的场景中有用。我会选择 URL + 历史 API。这是一个经典的、经过验证的、直观的解决方案。
@Oleg 我同意你的看法。让我们使用历史 API :) 谢谢！

标签： javascript angularjs web pagination single-page-application

【解决方案1】：

通过导航保存进度是SPA UX设计中的预期行为，因此维护他选择的页面是正确的，并且由于是分页，即使用户想返回也不会成为问题到任何页面，只需点击一下。

【讨论】：

假设您进入第 4 页，然后直接注销并关闭浏览器。当您重新启动网站并继续进行身份验证时，您是否希望像以前一样显示第 4 页？
不，我指的是你的例子。在注销的情况下，需要从浏览器缓存中清除所有内容。
是的，你是对的。我只想保留用户的偏好，如搜索过滤器，即使用户注销。但是分页数据会从本地存储中清除。
那我建议你换个方式，把这些东西存到localstorage不是个好主意，你得考虑换浏览器，重置它，隐身会话等等……你不'不想在他注销或更改浏览器时改变用户体验。

【解决方案2】：

首先，我会避免使用本地存储，而是使用服务来保存您的页面计数器。其次，您不需要将 pg 计数器持久化到其他任何地方，而是在范围变量中以刷新到 mext 页面数据。您甚至可以考虑只添加类似于无限滚动用例的结果。但无论哪种方式，您都可以使用局部范围变量进行分页。是否直接转到上次查看的页面 - 是一个更加商业化的决定，将取决于需求。

但是你可以很容易地使用广播和观察来持久化或删除持久化的数据，并根据监听的事件决定持久性。

希望对你有所帮助...

【讨论】：

你的意思是AngularJS“服务”吗？如果我使用它，整个页面的简单刷新（Windows 上的 F5 或 Mac 上的 Cmd+R）会丢失当前页码，因为 Angular 会完全重新加载它的组件，包括这个服务。
我在考虑一个典型的分页场景，其中页面是大型结果集的逻辑中断。但是，我认为您的要求更像是“向导”类型的要求。可能我会做的是（将根据实际需要进行更改）有一个 JS 对象作为模型（$scope var），它将驱动多个向导页面的控件（使用 ng-show、ng-f 等），它们是一部分的单一路线。由于需要刷新浏览器，我也会将此对象持久化到 Session Storage 中，当用户关闭浏览器时会自行清除。

【解决方案3】：

像这样在 JS 中维护一种继承权怎么样：

假设用户导航到名为“客户搜索”的部分

customer_search.customer_display.page = 2

customer_search 是 a 小节，customer_display 是您要定位的分页视图。

menu.menu_items.page=7

其中 menu 是 subsection ，menu_items 是分页视图

如果您的应用程序以合理的层次结构方式组织，可能会起作用。

也许您还可以在 $scope 中为该特定控制器维护页面。

【讨论】：

为什么要重新设计 URL？
我认为他正在导航到另一个视图，并且 url 的页码由用户输入操作决定。我建议使用 JS 的不同方式——尽管关于用例我可能完全错了！它通过避免 localstorage 并在 JS 甚至在 $scope 中持久化页面计数器。只是。

【解决方案4】：

URL 应该指示导航。

当我导航到您的网站时，例如example.com，我希望出现在第一页。

当我导航到您网站的（已添加书签的）页面时，例如example.com?page=2，我希望在第二页。

当我点击后退按钮时，我希望看到的前一页与我离开时完全一样。您无需刷新整个页面，只需监听历史事件并相应更新即可。

而且我坚信这个问题不属于stackoverflow...

【讨论】：

你不需要刷新整个页面 > 我希望有最新的更新，即使我点击“上一个”。可能是物品的标题更新，或者照片等。可以通过一些技术比如websockets来实现这个更新，但是更容易刷新整体。
好吧，当然，如果您的页面是某种“实时”提要。但重点是您不需要重新加载。只需使用 ajax 调用从服务器获取数据的差异（尤其是如果您使用 Angular！数据绑定将自动为您完成更新工作）。
我同意。但是当我说“重新加载”时，我的意思是显示项目的实际 ng-repeat 部分。不是完全重新加载，因为“F5 或 Cmd+R 将涉及”