Question

我有一个Ajax应用程序的问题，我正在尝试使用浏览器的后退和前进按钮。我正在使用jQuery History插件来启用浏览器历史记录。

该应用包含一页产品。有一个排序栏，使用户可以按各种值对产品进行排序。用户可以选择产品服装类别（连衣裙，上衣，下装，裙子等），子类别部门（裙子：迷你裙，长裙，高腰，波西米亚风/嬉皮士等），尺码（XS SML XL XXL） XXXL），颜色（白色，黑色，灰色，蓝色，红色等），以及时代和材料。

通过使用Ajax将最新选择的选项加载到适当的DIV中，可以启用大多数选项。

因此，例如，要选择黑色，将执行以下代码

$('#colorSort').load('colorSort.php?color=Black');

然后，如果用户选择布朗：

$('#colorSort').load('colorSort.php?color=Brown');

然后，如果用户取消选择Black：

$('#colorSort').load('colorSort.php?colorRemove=Black');

只要我们不需要支持后退/前进按钮，这就可以正常工作，但是当通过jQuery History添加后退按钮功能时，我们会遇到问题。例如：使用我们之前的示例，用户选择了黑色和棕色的颜色。现在让我们说用户单击后退按钮。用户希望删除他们的Brown颜色选择，但情况并非如此，因为正在加载的URL是：

colorSort.php?color=Black,

而不是

colorSort.php?colorRemove=Brown

这是它需要的。

我尝试通过在查询字符串中添加一组“撤消”参数来解决此问题。例如，

colorSort.php?color=Brown//colorRemove=Brown

包含双斜杠之前的当前查询字符串和斜杠之后的'back'查询字符串。所以使用这段代码，如果我知道点击了一个新链接，我可以加载当前查询字符串（在斜杠之前），如果我知道后面的按钮被点击了，我可以在斜杠后加载'后'查询字符串。

但问题是似乎没有任何方法可以检测是否单击了后退/前进按钮。 jQuery History在hashchange事件下运行，并且该事件对于触发它的事件没有区别（据我所知）。

这是我的问题。如果StackOverflow.com的超级聪明人能帮我找到解决方案，我将非常感激。谢谢！

Answer 1

结帐jquery bbq（后退按钮和查询）。它允许您使用浏览器的标准历史记录实现来存储状态，从而实现您想要的目标。然后它使用hashChange事件（当支持时和一些技巧时）在感兴趣的事情发生时触发动作（即点击链接或点击后退按钮）

通过这种方式，您可以单击一个链接，它会在您的页面上添加一个新的哈希参数，您可以获取该参数的任何内容并相应地加载数据。当你回击时，它获得了param的先前值，并且你像以前一样加载，尽可能地缓存。这是一种简单的，不完全正确的解释，但足够接近简短的概述。

Answer 2

添加隐藏字段以存储颜色值。第一次更改颜色时，请将值添加到隐藏的表单中。

每次检查颜色变化的条件

如果您按下后退按钮并返回

如果隐藏字段具有值，则使该隐藏字段中的颜色变为

在这种情况下是棕色

否则如果隐藏字段为空则默认为黑色。

我希望这会奏效。

由于页面未提交会话无法使用。