Блог

У меня есть страница поиска, где каждый результат поиска добавляется на страницу с помощью 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) amp;amp; window['localStorage'] !== null) {
    if ('myTable' in localStorage amp;amp; window.location.hash) {
        $("#myTable").html(localStorage.getItem('myTable'));
    }
}

// Save the search result table when leaving the page.
$(window).unload(function () {
    if (('localStorage' in window) amp;amp; window['localStorage'] !== null) {
        var form = $("#myTable").html();
        localStorage.setItem('myTable', form);
    }
});
 

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

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

Я бы выбрал localstorage и хэш-решение, потому что это то, что делают некоторые веб-сайты. Вы также можете скопировать и вставить URL-адрес, и он просто загрузит тот же запрос. Это довольно приятно и, я бы сказал, очень доступно.

Мне любопытно узнать, почему это не сработало. Обновите свой ответ, чтобы мы могли помочь.

Другим решением является использование фактов, что поля ввода сохраняются при использовании кнопки «Назад». Итак, мне это нравится :

Моя страница содержит скрытый ввод, подобный этому :

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

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

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

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

«Возможность добавления закладок, ссылок и ввода

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