Помните, что ajax добавил данные при нажатии кнопки

У меня есть страница поиска, на которой каждый результат поиска добавляется на страницу с помощью 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);
    }
});

Ответ 1

У вас есть несколько вариантов.

Используйте localstorage, чтобы запомнить последний запрос
Использовать файлы cookie (но не)
Используйте хеш, когда вы пытались с помощью document.location.hash = "last search" обновить URL. Вы снова посмотрите на хэш и, если он будет установлен, выполните еще один ajax для заполнения данных. Если вы сделали localstorage, тогда вы можете просто кэшировать последний запрос ajax.

Я бы пошел с localstorage и хеш-решением, потому что это то, что делают некоторые веб-сайты. Вы также можете скопировать и вставить 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 );
});

Ответ 3

Я считаю, что вы можете использовать секцию хэша (после знака #), чтобы дифференцировать вызов pre-ajax на странице и пост-аякс-вызов, тем самым кнопка "Назад" приведет вас к версии пост-аякс-кода. Можете ли вы рассказать о том, почему это решение не сработало для вас?

Эта страница может помочь:

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

"Bookmarkable, Linkable и Type-In-Able

window.location.hash делает URL уникальным, поэтому пользователь может его добавлять, ссылку на него и введите его прямо в свой браузер. window.onload гарантирует, что закладка используется для установки состояния. Опрос или IFrame обеспечивают это будет работать даже тогда, когда базовый URL (до хэша) будет таким же."