N'oubliez pas ajax ajouté des données lorsque vous appuyez sur le bouton de retour

Question

J'ai une page de recherche où chaque résultat de recherche est ajouté à la page avec AJAX. De cette façon, je peux permettre aux utilisateurs de rechercher des e.g Led Zeppelin, puis faire une autre recherche pour Metallica , mais l'ajouter à la même liste de résultats de la recherche précédente.

Mon problème est que lorsqu'un utilisateur clique sur un lien vers un enregistrement, puis clique sur le bouton précédent, retour vers les résultats de la recherche.
FireFox (7) garde la page car il a regardé quand je l'ai laissé, en affichant le résultat complet.
IE (7,8) et Chrome (15) de l'autre coté de l'affichage de la page comme elle était avant d'ajouter les résultats de la recherche avec AJAX, comme si elle ne se souvient pas que j'ai ajouté des données.

Ci-dessous le code que j'utilise. J'ai essayé d'ajouter l' location.hash = "test"; , mais il n'a pas l'air de fonctionner.

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

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

Je n'ai pas besoin d'avoir un bouton qui effectue le suivi des modifications sur la page de recherche, c'est comme marcher à travers chaque résultat de recherche, comme il a été ajouté. Je veux juste le navigateur pour se rappeler le dernier résultat de la recherche quand j'appuie sur le bouton retour.

RÉSOLU
Changer d' document.location.hash = "latest search" n'a rien changé. J'ai dû utiliser l' localStorage comme Amir souligné.

Cela va dans le reste de l'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);
    }
});

Answer 1

Vous avez quelques options.

1. Utilisation localstorage pour se souvenir de la dernière requête
2. L'utilisation des cookies (mais ne le font pas)
3. Utiliser le hachage comme tu essayé avec document.location.hash = "last search" à la mise à jour de l'url. Vous regardez le hachage de nouveau et si elle est définie, puis faire un autre ajax pour remplir les données. Si vous aviez fait localstorage ensuite, vous pourriez juste le cache de la dernière requête ajax.

J'irais avec le localstorage et le hachage de la solution parce que c'est ce que certains sites internet. Vous pouvez également copier et coller l'URL et il suffit de charger la même requête. C'est assez agréable et je dirais très accessible.

Je suis curieux de savoir pourquoi ça ne fonctionne pas. Mise à jour de votre réponse afin que nous puissions vous aider.

Answer 2

Une autre solution est d'utiliser les faits que les champs de SAISIE sont conservés lors de l'utilisation du bouton retour. Donc, je fais comme ça :

Ma page contient une entrée cachée comme ça :

<input type="hidden" id="bfCache" value="">

Une fois le contenu ajax est dynamicaly chargé, je sauvegarde le contenu dans mon champ caché avant de l'afficher:

function loadAlaxContent()
{
    var xmlRequest = $.ajax({
            //prepare ajax request
            // ...
        }).done( function(htmlData) {
            // save content
            $('#bfCache').val( $('#bfCache').val() + htmlData);

            // display it
            displayAjaxContent(htmlData);
        });
}

Et la dernière chose à faire est de tester le champ caché au chargement de la page. Si elle contient quelque chose, que parce que le bouton de retour a été utilisé, donc, nous avons juste à afficher.

jQuery(document).ready(function($) {

    htmlData = $('#bfCache').val();

    if(htmlData)
        displayAjaxContent( htmlData );
});

Answer 3

Je crois que vous pouvez utiliser le hachage de l'article (après le signe#) afin de différencier la page de pré-appel d'ajax et de post-appel ajax, de cette façon, le bouton retour vous à la post-appel ajax version à la place. Pouvez-vous expliquer pourquoi cette solution ne fonctionne pas pour vous?

Cette page peut vous aider:

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

"Bookmarkable, Couplés, et le Type En Mesure

de la fenêtre.emplacement.hachage rend l'URL unique, de sorte qu'un utilisateur peut mettre en signet, lien vers elle, et tapez directement dans leur navigateur. de la fenêtre.onload assure le signet est utilisé pour définir l'état. D'interrogation ou de l'IFrame s'assurer cela fonctionne même lorsque l'URL de base (avant le hachage) est la même."