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

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

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

• 用户进入

  myItemsList.html

• 他打开包含url的第2页：

  myItemsList.html？page=2

• 然后，他转到另一个页面：

  myOtherPage.html

• 他返回到最初指向

  myItemsList.html

  的链接，该链接通过localStorage直接显示页面

  myItemsList.html？page=2

  ，以便继续导航

这会不会让用户感到困惑，可能会期望将第1页视为新的起始导航。
如果我在列表的顶部显示一个类似于“第2页”的标签，以警告他正在看到导航的前一部分，这不是很友好吗

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

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

• 用户进入

  myItemsList.html

• 他打开包含url的第2页：

  myItemsList.html？page=2

• 他在该页面（“显示”页面）中打开一个项目，导致：

  myItemsList.html？id=123

• 他点击浏览器的后退按钮，刷新了

  myItemsList.html

  （从单页应用程序开始）。当前分页（第2页）将丢失，用户需要重新启动它才能继续其项目发现

这似乎真的很棘手…

---

对于这样的用例，我应该选择什么策略？

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

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

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

---

希望这些有助于……

在JS中保持一种继承人的身份怎么样：

假设用户导航到一个名为Customer Search的部分

customer_search.customer_display.page = 2

当customer_search是a子部分时，customer_display是您所针对的带有分页的视图

其中menu是子部分，menu_项是带有分页的视图

如果应用程序以合理的分层方式组织，则可能会起作用

---

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

URL应该指示导航

当我浏览到你的网站时，例如example.com，我希望能在第一页

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

---

当我点击后退按钮时，我希望看到的是与我离开时完全相同的上一页。您不需要刷新整个页面，只需收听历史事件并相应地更新即可

---

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

为什么不使用history api？它也可能是一个解决方案，但与这个问题相关的许多答案都提到了localStorage。我很想知道所选择的本地存储策略。我不相信本地存储在您的场景中有用。我会选择URL+历史api。这是一个经典的、经过验证的、直观的解决方案。@Oleg我同意你的看法。让我们看历史API:）谢谢！让我们想象一下，您进入第4页，然后直接注销并关闭浏览器。当您重新启动网站并继续进行身份验证时，是否希望像以前一样显示第4页？不，我指的是您的示例。如果注销，所有内容都需要从浏览器缓存中清除。是的，你说得对。我只想保留用户的首选项，比如搜索过滤器，即使用户注销。但是分页数据会从本地存储中清除。然后我建议你找到另一种方法，把这样的东西存储在本地存储中不是一个好主意，你必须考虑改变浏览器，重置它，隐姓埋名会话等等。如果他注销或更改浏览器，您不想更改用户体验。您是指AngularJS“服务”吗？如果我使用它，整个页面的简单刷新（windows上的F5或Mac上的Cmd+R）将丢失当前页码，因为Angular将完全重新加载其组件，包括此服务。我正在考虑一个典型的分页场景，其中页面是大型resultset的逻辑中断。然而，我认为您的更像是一个“向导”类型的要求。可能我要做的是（将根据实际需要进行更改）将JS对象作为模型（$scope var），它将驱动多个向导页面（使用ng show、ng-f等）的控件，这些页面是单个路由的一部分。由于浏览器刷新要求，我还将在会话存储中保留此对象，当用户关闭浏览器时，该对象将自动清除。为什么要重新创建URL？我认为他正在导航到另一个视图，URL的页码由用户输入操作决定。我建议使用JS的另一种方式-我可以完全

menu.menu_items.page=7