单击浏览器后退按钮时如何维护页面状态？

Question

我有一个客户端分页和过滤的页面。该页面列出了大约200-300个产品。 该页面包含一些过滤器，如类别，制造商和重量。 点击任何页码或过滤器，我使用Jquery在客户端进行页面内容管理。

在此步骤之前一切正常。现在有一个我面临问题的用例。

1. 让我们说用户进入我们的产品列表页面并点击一些过滤器并获取产品列表。
2. 现在，他点击特定产品，将其重定向到产品页面以查看产品的详细信息。
3. 但现在当用户点击后退按钮时，用户将获得具有初始状态的页面，而不选择任何过滤器。

用户是否可以通过点击后退按钮获取之前选择过滤器的页面？

Answer 1

您可以使用以下某些功能跨多个页面存储数据。

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

如果使用Cookie，本地存储或哈希，则需要在页面中添加JavaScript代码，以便在页面加载时加载和应用存储的数据。

Answer 2

有很多方法可以做到这一点：

1. 如果您正在处理html5历史记录和单页应用程序，那么您不会重新加载页面。但根据你的问题，我认为这不是你正在处理的问题。
2. 在网址中存储内容。有关此示例，请查看TotalHockey上的过滤器，例如http://www.totalhockey.com/Search.aspx?category_2=Sticks%2fComposite%20Sticks&chan_id=1&div_main_desc=Intermediate&category_1=Sticks所以当你向后时，URL包含整个州。
3. 如果您的浏览器支持localstorage，请使用localstorage。
4. 将Cookie与$ .cookie API一起使用
5. 将其存储在服务器的会话中。

Answer 3

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

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