Question

我有一个搜索页面，其中每个搜索结果都使用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"并未改变任何内容。我不得不使用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);
    }
});

Answer 1

您有几个选择。

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

我会使用localstorage和哈希解决方案，因为这是一些网站所做的。您还可以复制并粘贴URL，它只会加载相同的查询。这非常好，我想说非常容易接近。

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

Answer 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 );
});

Answer 3

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

此页面可能有所帮助：

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

“可加标签，可链接和可输入类型

window.location.hash使URL唯一，因此用户可以为其添加书签，   链接到它，并直接在其浏览器中键入它。在window.onload   确保书签用于设置状态。轮询或IFrame确保   即使基本URL（在散列之前）相同，这也会起作用。“

记得ajax在按回按钮时添加了数据

3 个答案: