当浏览器后退按钮被点击时如何保持页面状态？

Question

我有一个带有客户端分页和过滤功能的页面。该页面列出了大约200-300个产品。 页面包含一些过滤器，如类别、制造商和重量。 单击任何一页或过滤器，我都会使用Jquery在客户端上操纵页面内容。

到此为止，一切都很好。现在有一个用例让我遇到了问题。

1. 假设用户进入我们的产品列表页面并点击了一些过滤器，然后获得了一系列产品列表。
2. 现在，他点击了某个特定的产品，该产品将重定向他到产品页面以查看产品详情。
3. 但是现在，当用户点击后退按钮时，用户会得到最初状态的页面，没有选择任何过滤器。

有没有办法让用户在点击后退按钮时获取具有先前选定的过滤器的页面？

- user3427540

---

将状态存储在服务中，在控制器初始化时检查状态。 - charlietfl

你在谈论面包屑导航，这可以在应用程序的后端部分完成，但也可以使用localStorage。请提供筛选器的HTML以获得进一步帮助。 - Strahinja Djurić

在这个上下文中，“service”是什么意思？我会将设置存储在cookie中。 - Muleskinner

Answer 1

您可以使用以下方法在多个页面之间存储数据：

1. 将数据存储在cookies中。
2. 将数据存储在本地存储中。
3. 将数据存储在服务器上的session中。
4. 将数据作为URL中的一部分（使用hash或查询字符串来过滤参数）。请注意，更改查询字符串会导致页面重新加载。

如果使用cookies、本地存储或hash，则需要向页面添加JavaScript代码，在页面加载时加载和应用存储的数据。

- hon2a

---

假设我点击特定的过滤器（复选框），我将把该值添加到页面 URL 上（例如：page.cfm?categoryid=4,5），现在我需要在 document.ready 上检查这些 URL 变量并通过 JQuery 触发这些过滤器。我是正确的吗？ - user3427540

好的。但我会将这个选项移到列表底部，因为它会在每次筛选选择时导致页面重载。如果您的应用程序纯粹基于客户端，则建议使用 cookie 或本地存储。 - hon2a

在不刷新页面的情况下，是否无法在选择筛选器时将筛选器附加到URL上。 - user3427540

确实是这样。您只需要使用URL的“哈希”部分，而不是查询字符串。 - hon2a

我的筛选完全是客户端的。在选择筛选器时，我不需要进行任何ajax调用。我只需隐藏与筛选条件不匹配的产品。假设我在选择筛选器时将过滤器值存储在cookie中，则在单击“返回”按钮时，我需要在document.ready上检查这些cookie并手动触发筛选器吗？我走对了方向吗？ - user3427540

你在。我会将它添加到答案中。 - hon2a

Answer 2

有几种方法可以做到这一点：

1. 如果您正在处理html5历史记录和单页应用程序，则不会重新加载页面。但根据您的问题，我假设这不是您正在处理的内容。
2. 在URL中存储某些内容。例如，请查看TotalHockey上的筛选器，例如http://www.totalhockey.com/Search.aspx?category_2=Sticks%2fComposite%20Sticks&chan_id=1&div_main_desc=Intermediate&category_1=Sticks，因此当您向后移动时，URL包含整个状态。
3. 使用支持它的浏览器的本地存储。
4. 使用$.cookie API使用cookie
5. 将其存储在服务器上的会话中。

- deitch

---

@hon2a，我们可能有些误解了！很好进行验证！我也会给你点赞的！ - deitch

假设我点击了特定的筛选器（复选框），我将把该值添加到页面URL中（例如：page.cfm?categoryid=4,5），现在我需要在document.ready中检查这些URL变量并通过jquery触发这些筛选器。我是正确的吗？这可以仅使用jquery完成还是需要使用History API？我对History API一无所知。 - user3427540

Answer 3

您可以在提交筛选输入后，将搜索过滤器数据存储在会话中，并在每个ajax请求（加载产品列表）时检查存储在会话中的搜索过滤器输入，并根据它们显示数据。如果搜索会话为空，则显示整个列表。

如果使用GET方法，则还可以在搜索记录后将完整的ajax请求URL存储在会话中，并在从产品详细信息页面返回后再次点击该特定URL。

- Manish Jangir