jquery - 记住点击后退按钮时 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. 使用 Cookie(但不要)
3. 使用您尝试使用 document.location.hash = "last search" 时的哈希值来更新网址。您将再次查看哈希值，如果已设置，则执行另一个 ajax 来填充数据。如果你已经完成了本地存储，那么你可以只缓存最后一个ajax请求。

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

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