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

Question

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

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

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

是否会使用户感到困惑，可能希望将第1页视为新的起始导航 如果我显示在列表的顶部，为了警告他他正在看到导航的前一部分，有一种像“Page 2”这样的标签，它不是UX友好的吗？

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

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

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

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

Answer 1

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

Answer 2

首先，我会避免使用localstorage并使用服务来保留ur page counter。 其次，你不需要将pg计数器保存到其他任何地方，但是在范围变量中用于刷新到mext页面数据。您甚至可以考虑添加类似于无限滚动用例的结果。但无论哪种方式，你都可以使用局部范围变量进行分页。 是否直接访问最后查看的页面 - 是一项更具商业决策，将取决于需求。

但是您可以使用广播和观看非常轻松地持久保存或删除持久数据，并根据收听的事件决定持久性。

希望这有助于......

Answer 3

像这样在JS中保持一种heirerachy怎么样：

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

customer_search.customer_display.page = 2

如果customer_search是子部分，则customer_display是您正在定位的具有分页的视图。

menu.menu_items.page=7

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

如果您的应用程序以合理的分层方式组织，那么可能会有效。

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

Answer 4

网址应该指示导航。

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

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

当我点击后退按钮时，我希望能够像我离开时一样显示上一页。您无需刷新整个页面，只需听取历史事件并相应更新。

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