是否可以在单击 BACK 按钮时保持（无需重新加载）AJAX 页面状态？答案

【问题标题】：Is it possible to persist (without reloading) AJAX page state across BACK button clicks?是否可以在单击 BACK 按钮时保持（无需重新加载）AJAX 页面状态？
【发布时间】：2010-09-07 05:56:06
【问题描述】：

我熟悉使后退按钮在各种情况下在 AJAX 应用程序中工作的几种方法，但我还没有找到可以在我的特定情况下正常工作的解决方案。

我正在使用的页面是网站的搜索界面。您在普通搜索框中输入术语，单击“开始并在搜索结果页面结束。在搜索结果页面上，有大量 UI 控件用于过滤/排序搜索结果以查找您要查找的内容。一些由这些控件触发的操作可能需要（相对）较长的时间才能完成（例如几秒钟）。

如果用户最初过滤/排序他们的结果，这种延迟很好......有一个很好的 AJAX 微调器等等......但是当用户点击搜索结果然后点击返回按钮时，我希望页面立即恢复到他们点击时的状态。

我可以使用 IFRAME/片段标识符作为页面历史的字典来恢复状态，但最终发生的情况是，当用户第一次点击后退按钮时，初始页面被加载，然后它（重新）进行 AJAX 查询获取页面状态，这会触发 AJAX 微调器和另一个可能的等待几秒钟。

当用户通过BACK按钮返回页面时，有没有不需要这种两阶段加载页面的方法？

编辑添加：我偏爱 jquery，但我对依赖于其他库/工具包或独立/原始 javascript 的解决方案感到满意。

编辑添加：我应该补充说我正在尝试避免使用 cookie/会话，因为这可以防止人们同时打开多个浏览器窗口/标签并操作不同的搜索结果集。

编辑：Matt，您能否详细说明您提出的解决方案（通过片段标识符触发页面更改事件）？我看到这将如何帮助单击同一页面上的“返回”按钮，但在单击特定结果后不会返回到搜索结果页面。

【问题讨论】：

标签： ajax

【解决方案1】：

尝试使用 localStorage 对象。这是跨浏览器库 jStorage 和 WEBSHIMS json-storage

【讨论】：

这几天肯定是答案。

【解决方案2】：

你调查过YUI Browser History Manager吗？

【讨论】：

【解决方案3】：

编辑添加：我应该添加我正在尝试避免使用 cookie/会话因为这可以防止人们多个浏览器窗口/选项卡打开并操纵不同的搜索集同时得到结果。

您可以创建一个随机令牌并将其分配给片段标识符。

如果没有设置片段标识符，则在第一页加载时创建一个令牌
在导航出去之前，将所有临时 ajax 数据存储在 cookie 中，并以该标记作为索引。
回击时，如果您设置了片段标识符，则从 cookie 中的相应令牌加载数据。
您甚至可以添加“时间”字段来使令牌过期等...

示例 cookie (JSON)：

{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}

【讨论】：

【解决方案4】：

使用与用户个人资料相关联的持久性内容。

Cookie 和会话是好主意，但您也可以将这些内容保存在数据库中。这为您提供了一个额外的优势，即能够在不同的浏览会话中保存用户的过滤偏好。（例如，如果他正在办公室寻找东西，然后决定在他回到家时继续搜索）。

这完全取决于过滤器和天气的复杂性，您是否认为用户会想要在不同的浏览会话中使用..

【讨论】：

【解决方案5】：

使用“将一些信息添加到 URL 末尾的 # 方法”来触发页面更改事件是否有帮助。

这样，单击后退按钮实际上不应更改页面，并且您应该能够在不加载第一个页面的情况下恢复状态。

【讨论】：

【解决方案6】：

只需使用 cookie。

【讨论】：