如何在单页应用程序中处理分页？

Question

在我的单页应用程序（Javascript（AngularJs）Web应用程序）中，我正在显示分页项目列表。每页显示10个项目。为了在用户导航到其他页面时保留用户打开的当前分页，我将当前页数放在浏览器的localStorage中。以下是工作流程示例：

- 用户进入myItemsList.html。 - 他打开第2页，涉及URL：myItemsList.html？page=2。 - 然后，他转到另一个页面：myOtherPage.html。 - 他回到最初指向myItemsList.html的链接，由于localStorage直接显示myItemsList.html？page=2页面，以便可能继续导航。

这会让用户感到困惑，也许期望以页面1作为新的起始导航。如果我在列表顶部显示一种标签，如“第2页”，以警告他正在查看其导航的先前部分，那么这会对用户体验友好吗？或者我完全避免保留当前分页？如果不保留当前查看的页面，则可能会发生以下情况：

- 用户进入myItemsList.html。 - 他打开第2页，涉及URL：myItemsList.html？page=2。 - 他打开此页面上的项（“显示”页面），导致：myItemsList.html?id=123。 - 他单击浏览器的返回按钮，导致myItemsList.html刷新（因为是单页应用程序）。当前的分页（第2页）将丢失，用户需要重新启动它才能继续发现项目。这似乎非常微妙...对于这种情况，我应该选择什么策略？

- Mik378

---

为什么不使用历史记录API？ - Oleg

这也可能是一个解决方案，但是与此问题相关的许多答案都提到了localStorage。我很想知道使用localStorage的选择策略。 - Mik378

我不确定localStorage在你的情况下是否有用。我会选择URL + history api。这是一个经典的，经过验证的，直观的解决方案。 - Oleg

@Oleg 我同意你的看法。让我们使用历史 API :) 谢谢！ - Mik378

Answer 1

在单页应用程序的用户体验设计中，保存导航进度是一种预期行为，因此保持用户停留在当前页面是正确的选择。由于这是一个分页功能，即使用户想要回到任何页面，也不会有问题，只需要点击即可。

- Labib Ismaiel

---

那么假设你进入了第4页，然后直接注销并关闭了浏览器。当你重新启动网站并进行身份验证时，你是否期望之前显示的是第4页？ - Mik378

不，我指的是你的例子。在注销的情况下，需要从浏览器缓存中清除所有内容。 - Labib Ismaiel

是的，你说得对。我只想保留用户的偏好设置，比如搜索过滤器，即使用户退出登录。但分页数据将从本地存储中清除。 - Mik378

那我建议你找另一种方法，将这些东西存储在本地存储中不是一个好主意，你必须考虑更改浏览器、重置浏览器、隐身会话等等……如果用户注销或更改浏览器，你不想改变用户体验。 - Labib Ismaiel

Answer 2

在JS中维护一种类似于这样的层次结构怎么样：

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

customer_search.customer_display.page = 2

其中，customer_search是一个子部分，customer_display是你要针对带有分页的视图。

menu.menu_items.page=7

其中菜单是子部分，菜单项是带有分页的视图

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

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

- Nishant

---

你为什么要重新发明URL？ - Oleg

我认为他正在导航到另一个视图，URL的页码由用户输入操作决定。我建议使用JS的不同方式 - 但我可能完全错误地理解了用例！通过避免使用localstorage并将页面计数器保持在JS甚至$scope中来实现。只是一个想法。 - Nishant

Answer 3

首先，我建议避免使用localstorage，而是使用服务来持久化您的页面计数器。 其次，您不需要将页面计数器持久化到任何其他地方，只需在作用域变量中刷新到下一页数据即可。您甚至可以考虑只是添加到类似于无限滚动的结果中。但无论如何，您都可以使用本地作用域变量进行分页。 是否直接转到上次查看的页面-这是一个更商业化的决定，取决于需求。

但是，您可以非常容易地使用广播和观察来持久化或删除持久化数据，并根据所侦听的事件决定是否进行持久化。

希望这些能帮到您...

- rahul

---

你是指AngularJS中的“服务”吗？如果我使用它，整个页面的简单刷新（在Windows上为F5或在Mac上为Cmd+R）将会丢失当前页码，因为Angular会完全重新加载其组件，包括此服务。 - Mik378

我在思考一个典型的分页场景，其中页面是大型结果集的逻辑分割。然而，我认为你的需求更像是“向导”类型。可能我会做的是（根据实际需求而变化），有一个JS对象作为模型（$scope var），它将驱动多个向导页面的控件（使用ng-show、ng-f等），这些页面是单一路由的一部分。 由于浏览器刷新的要求，我还将在Session Storage中持久化此对象，当用户关闭浏览器时，它将自行清除。 - rahul

Answer 4

URL 应该决定导航。

当我访问你的网站，例如 example.com 时，我期望看到第一页。

当我访问你网站的一个（已加书签）页面，例如 example.com?page=2 时，我期望看到第二页。

当我点击返回按钮时，我期望看到上一个页面完全与我离开时一样。你不需要刷新整个页面，只需监听历史事件并相应更新即可。

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

- Oleg

---

你不需要刷新整个页面 > 即使我点击“上一页”，我也希望能获得最新的更新。这可能是项目标题更新、照片等。可以使用一些技术（如WebSockets）来实现此更新，但刷新整个页面更容易。 - Mik378

当然，如果你的页面是某种“实时”提要，则需要重新加载。但重点是你不需要重新加载。只需通过 AJAX 调用从服务器获取数据的差异（特别是如果你正在使用 Angular！数据绑定会自动完成更新工作）。 - Oleg

我同意。但是当我说“重新加载”时，我指的是显示项目的实际ng-repeat部分。不是像“按F5或Cmd + R那样完全重新加载”。 - Mik378