Remember ajax added data when hitting back button

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.

Another solution is to use the facts that INPUT fields are preserved while using back button. So, I do like that :

My page contains an input hidden like that :

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

Once ajax content is dynamicaly loaded, I backup content into my hidden field before displaying it:

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

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

And last thing to do is to test the hidden field value at page loading. If it contains something, that because the back button has been used, so, we just have to display it.

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

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

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