还记得阿贾克斯打回按钮时添加的数据 [英] Remember ajax added data when hitting back button

问题描述

我有，每一个搜索结果添加到与AJAX网页搜索页面。这样，我可以让用户搜索，例如齐柏林飞船的，然后做一套搜索的 Metallica的的，但把它添加到相同的结果列表为previous搜索。

我的问题是，当用户点击一个链接到一个记录，然后点击后退按钮，返回搜索结果。
火狐（7）保存的页面，因为它看起来，当我离开时，显示完整的结果。
IE（7,8）和 Chrome浏览器（15），另一方面将显示页面，因为它是添加任何搜索结果的AJAX前，因为如果它不记得我添加的数据吧。

下面是code我用。我试图添加的location.hash =测试; ，但它似乎没有工作

。

  //添加搜索结果
$（＃searchForm）。递交（函数（事件）{
    //location.hash =测试;
    。事件preventDefault（）;

    $。员额（$（本）.attr（行动），$（本）.serialize（）
    功能（数据）{
        $（TBODY）追加（数据）;
    }）;
}）;
 

我不需要一个后退按钮来跟踪变化的搜索页面上，想通过每个不同的搜索结果为它增加了加强。我只是希望浏览器记住最后的搜索结果，当我打的后退按钮。

解决
更改为 document.location.hash =最近搜索并没有改变任何东西。我不得不使用的localStorage 为阿米尔指出。

该进入的jQuery的code休息：

  //更换搜索结果表上的负荷。
如果（在窗口（localStorage的）及和放大器;！窗口['localStorage的'] == NULL）{
    如果（为myTable中的localStorage和放大器;＆安培; window.location.hash）{
        $（＃为myTable）HTML（localStorage.getItem（'为myTable'））;
    }
}

//离开页面时保存搜索结果表。
$（窗口）.unload（函数（）{
    如果（在窗口（localStorage的）及和放大器;！窗口['localStorage的'] == NULL）{
        变种形式= $（＃为myTable）HTML（）。
        localStorage.setItem（'mytable的，表）;
    }
}）;
 

解决方案

您有几种选择。

1. 使用 localStorage的记得上次查询
2. 使用饼干（但没有）
3. 使用哈希你试图与 document.location.hash =上次搜索更新URL。你会看到再次散列，如果它被设置，那么做一套Ajax来填充数据。如果你有localStorage的做到，那么你可以只缓存的最后一个Ajax请求。

我会去的localStorage的和散列解决方案，因为这就是一些网站做的。你也可以复制和粘贴URL，它只会加载相同的查询。这是pretty的不错，我会说交通十分便利。

我很好奇，想知道为什么它不工作。更新你的答案，所以我们可以提供帮助。

I have a search page where every search result is added to the page with AJAX. This way I can let users search for e.g Led Zeppelin, then do another search for Metallica but add it to the same result list as the previous search.

My problem is when a user clicks on a link to a record, then hits the back button, back to the search result.
FireFox (7) keeps the page as it looked when I left it, displaying the full result.
IE (7,8) and Chrome (15) on the other hand will display the page as it were before adding any search results with AJAX, as if it doesn't remember that I added data to it.

Below is the code I use. I tried to add the location.hash = "test"; but it didn't seem to work.

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

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

I don't need a back button that keeps track of changes on the search page, like stepping through each different search result as it was added. I just want the browser to remember the last search result when I hit the back button.

SOLVED
Changing to document.location.hash = "latest search" didn't change anything. I had to use the localStorage as Amir pointed out.

This goes into the rest of the jQuery code:

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

解决方案

You have a few options.

1. Use localstorage to remember the last query
2. Use cookies (but don't)
3. Use the hash as you tried with document.location.hash = "last search" to update the url. You would look at the hash again and if it is set then do another ajax to populate the data. If you had done localstorage then you could just cache the last ajax request.

I would go with the localstorage and the hash solution because that's what some websites do. You can also copy and paste a URL and it will just load the same query. This is pretty nice and I would say very accessible.

I am curious to know why it didn't work. Update your answer so we can help.

这篇关于还记得阿贾克斯打回按钮时添加的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！