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

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

你有几个选择.

1. 使用localstorage记住最后一个查询
2. 使用cookies(但不要)
3. 尝试使用散列document.location.hash = "last search"来更新URL.您将再次查看哈希,如果已设置,则执行另一个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 );
});