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

How to maintain the page state when browser back button is clicked?

本文关键字：维护 状态 按钮 单击 浏览器      更新时间：2023-09-26

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

在这一步之前，一切都很好。现在有一个用例，我遇到了问题。

  1. 假设用户来到我们的产品列表页面并单击一些过滤器并获取产品列表。
  2. 现在他点击一个 特定产品 ，这会将他重定向到产品页面以查看产品的详细信息。
  3. 但是现在当用户单击后退按钮时，用户将获得具有初始状态的页面，而无需选择任何过滤器。

用户可以通过任何方法获得带有先前在单击后退按钮时选择的过滤器的页面？

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

  1. 将数据存储在 Cookie 中。
  2. 将数据存储在本地存储中。
  3. 将数据存储在服务器上的会话中。
  4. 将数据设为 URL 的一部分（对筛选器参数使用哈希或查询字符串）。请注意，更改查询字符串会导致页面重新加载。

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

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

  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 与 $.cookie API 结合使用
  5. 将其存储在服务器的会话上。
您可以在提交

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

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

相关文章：