Google Chrome中的BACK按钮不能保留AJAX结果，但在其他主要浏览器中效果很好

Question

我有一个带有Laravel的Web应用程序。页A 有一个下拉列表，当用户选择一个选项时，AJAX结果将显示在列表下方。用户可以单击AJAX结果中的任何行，然后转到页B 。当用户按下Opera和Firefox中的后退按钮时，他选择的选项以及Ajax结果被保留，但在Chrome和IE中，只保留了他选择的选项。我如何使Chrome和IE像Firefox和Opera一样工作。

研究，有人告诉我Chrome不支持BFCACHE，这就是原因。他们有什么工作吗？

我的后退按钮的代码如下：

<div id="app-back-button">
  <a href="#" onclick="history.back(); return false;">
    <img alt="Back" border="0" src="{{ asset('images/general/back.png') }}" class="img-responsive" />
  </a>
</div>

Answer 1

尝试一下，希望它能帮助您...

jQuery(document).ready(function($) {
  if (window.history && window.history.pushState) {
    window.history.pushState('forward', null);
  }
});

Answer 2

我认为，除非停止'刷新'，否则我不值得照顾bfcache。有趣的部分是OP想要浏览器"不刷新"才能保持结果。

您可以将AJAX结果保存到本地存储中，当您的页面加载时，它将尝试显示来自本地的数据，当您按下按钮时，该页面将正常发送AJAX并更新本地存储。

不要依靠bfcache，这是一团糟。

Answer 3

将选择保存在cookie中。（我建议使用JS-Cookie。）如果用户返回A页，请检查cookie。如果存在，请选择正确的列表项目并触发应触发Ajax请求的处理程序。

因此，在AJAX代码结果中添加了列表下方的结果，添加cookie。最容易在选择列表中的每个选项中添加ID，因此您可以将ID添加为cookie值。

在Ajax done处理程序中：

Cookies.set('pageA-selection', 'SelectedId');

，然后在A页的文档上准备好您运行检查：

if (Cookies.get('pageA-selection')) {
  // Assuming you trigger the ajax request by a click handler on the list item
  $('#'+Cookies.get('pageA-selection')).click();
}