单击浏览器的“后退”按钮返回到 ajax 页面并使其看起来相同？

Question

我已经尝试对各种 jquery 历史插件进行一些研究，但我找不到任何适合我的情况的示例，所以我开始认为也许我正在尝试做的事情是不可能的。

我们有一个非常复杂的搜索页面，它使用 ajax 进行更新。用户使用大量选项进行搜索，他们会返回一个可以排序、页面等的结果列表。然后，如果他们单击其中一个结果，它会将他们导航到另一个页面以查看详细信息。但是，如果他们单击返回，则不会返回到所有 ajax 和 javascript 更新后页面的显示方式。他们看到的搜索页面没有任何结果。

我希望我可以在他们离开之前通过添加一个哈希来提取一些东西，或者使用其中一个 jquery 历史插件来实现类似的东西，这样当他们点击返回时，它就不会 RELOAD 搜索页面，但只会向他们显示他们的缓存版本（当他们点击其中一个结果时它最后的样子）。

据我所见，我为 ajax 和后退按钮找到的大多数示例似乎都使用了一个哈希值，该值告诉页面如何排列自身，甚至允许为包含哈希的页面添加书签。我认为对我来说，这意味着我基本上必须将搜索页面中的所有内容序列化为哈希值，这似乎并不实用，除非我完全误解了它的工作原理。

有人知道这是否可行吗？

Answer 1

您可以查看SammyJS 这是我用于 ajax 历史记录的插件。希望对你有帮助

Answer 2

如果它那么复杂，最好开发自己的解决方案，无需任何插件。只需使用location.hash 获取和设置hash 值并在哈希后存储所有表单输入元素及其值，如querystring input1=a&input2=b

在每个表单上提交更新哈希查询字符串

如果用户在历史记录中导航回读取哈希值，则对其进行解析并更新您的表单字段并提交以自动获取搜索结果。

Answer 3

至少有两种方法可以做你想做的事：

1. “经典” - 将所有用户搜索选项存储在 cookie 或会话中，例如“最后搜索”。因此，当用户在会话期间导航到搜索页面时，您可以读取 cookie / 会话并使用该选项显示最后的搜索结果。
2. “现代”方式-使用HTML5 history API-在每个搜索表单上一个搜索选项对象并通过history.pushState将其推送-当用户导航到其他页面然后按“返回”时，浏览器将使用此状态执行搜索。