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

Question

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

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

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

这会使用户感到困惑，也许希望将页面1视为新的开始导航。
如果我显示在列表的顶部，则会出现类似“第2页”的标签，以警告他他正在浏览导航的前面部分，这对UX友好吗？

还是应该完全避免持续当前的分页？

如果我不坚持当前浏览的页面，可能会发生以下情况：

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

这似乎很敏感...
对于这样的用例，我应该选择什么策略？

Answer 1

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

Answer 2

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

但是您可以非常轻松地使用广播来持久化或删除持久化数据，并根据侦听的事件来观察并确定持久性。

希望这对您有帮助...

Answer 3

像这样在JS中保持某种继承关系又如何呢：

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

customer_search.customer_display.page = 2

其中customer_search是子部分，customer_display是您定位的带有分页的视图。

menu.menu_items.page=7

其中menu是该小节，menu_items是具有分页的视图

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

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

Answer 4

URL应指示导航。

当我导航到您的网站（例如example.com）时，我希望它位于第一页。

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

当我按下“后退”按钮时，我期望与上一页完全一样。 您无需刷新整个页面，只需监听历史记录事件并相应地进行更新。

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