点击返回按钮时记住 ajax 添加的数据答案

【问题标题】：Remember ajax added data when hitting back button点击返回按钮时记住 ajax 添加的数据
【发布时间】：2011-10-31 16:26:20
【问题描述】：

我有一个搜索页面，其中每个搜索结果都使用 AJAX 添加到页面中。这样我可以让用户搜索例如 Led Zeppelin，然后再次搜索 Metallica，但将其添加到与之前搜索相同的结果列表中。

我的问题是当用户点击记录的链接，然后点击返回按钮，返回搜索结果。
FireFox (7) 保持页面的外观不变我离开了它，显示了完整的结果。另一方面，
IE (7,8) 和 Chrome (15) 将显示添加之前的页面任何使用 AJAX 的搜索结果，就好像它不记得我向其中添加了数据一样。

以下是我使用的代码。我尝试添加location.hash = "test";，但似乎不起作用。

// Add search result
$("#searchForm").submit(function (event) {
    //location.hash = "test";
    event.preventDefault();

    $.post($(this).attr('action'), $(this).serialize(),
    function (data) {
        $("tbody").append(data);
    });
});

我不需要一个后退按钮来跟踪搜索页面上的更改，例如在添加每个不同的搜索结果时单步执行。我只希望浏览器在我点击后退按钮时记住最后的搜索结果。

已解决
更改为 document.location.hash = "latest search" 并没有改变任何东西。正如 Amir 指出的那样，我必须使用 localStorage。

这进入了 jQuery 代码的其余部分：

// Replace the search result table on load.
if (('localStorage' in window) && window['localStorage'] !== null) {
    if ('myTable' in localStorage && window.location.hash) {
        $("#myTable").html(localStorage.getItem('myTable'));
    }
}

// Save the search result table when leaving the page.
$(window).unload(function () {
    if (('localStorage' in window) && window['localStorage'] !== null) {
        var form = $("#myTable").html();
        localStorage.setItem('myTable', form);
    }
});

【问题讨论】：

懒人的解决方法是在所有链接上使用target="_blank"。这样后退按钮就不会有问题了。

标签： jquery ajax

【解决方案1】：

您有几个选择。

使用localstorage 记住最后一次查询
使用 cookie（但不要）
使用您尝试使用document.location.hash = "last search" 的哈希来更新网址。您将再次查看哈希，如果已设置，则执行另一个 ajax 来填充数据。如果您已经完成了 localstorage，那么您可以缓存最后一个 ajax 请求。

我会选择本地存储和哈希解决方案，因为这就是某些网站所做的。您还可以复制和粘贴 URL，它只会加载相同的查询。这非常好，我会说非常方便。

我很想知道为什么它不起作用。更新您的答案，以便我们提供帮助。

【讨论】：

本地存储最终会被填满。

【解决方案2】：

另一个解决方案是使用在使用后退按钮时保留 INPUT 字段的事实。所以，我喜欢这样：

我的页面包含一个像这样隐藏的输入：

<input type="hidden" id="bfCache" value="">

动态加载 ajax 内容后，我会在显示之前将内容备份到隐藏字段中：

function loadAlaxContent()
{
    var xmlRequest = $.ajax({
            //prepare ajax request
            // ...
        }).done( function(htmlData) {
            // save content
            $('#bfCache').val( $('#bfCache').val() + htmlData);

            // display it
            displayAjaxContent(htmlData);
        });
}

最后要做的是在页面加载时测试隐藏字段的值。如果它包含一些东西，那是因为已经使用了返回按钮，所以我们只需要显示它。

jQuery(document).ready(function($) {

    htmlData = $('#bfCache').val();

    if(htmlData)
        displayAjaxContent( htmlData );
});

【讨论】：

我喜欢这个解决方案，只要项目可以接受限制。例如，如果您进行搜索并且结果是用 ajax 加载的并且包含指向详细信息页面的链接，请单击详细信息页面链接，然后返回并且结果仍然存在。但是，如果您要单击这些结果中另一个项目的详细信息页面，那么缓存就会消失。在某些情况下是很好的解决方案！

【解决方案3】：

我相信您可以使用哈希部分（在 # 符号之后）来区分页面 pre-ajax 调用和 post-ajax 调用，这样后退按钮会将您带到 post-ajax 调用版本。您能否详细说明为什么此解决方案不适合您？

此页面可能会有所帮助：

http://ajaxpatterns.org/Unique_URLs#Bookmarkable.2C_Linkable.2C_and_Type-In-Able

“可收藏、可链接和可输入

window.location.hash 使 URL 独一无二，因此用户可以将其添加为书签，链接到它，然后直接在他们的浏览器中输入。窗口.onload 确保书签用于设置状态。轮询或 IFrame 确保即使基本 URL（在哈希之前）相同，这也可以工作。”

【讨论】：