Loading dynamically generated jQuery page after page reload

I have开发者_如何学C a search script written in jQuery. To submit a query a user presses enter and then a URL for the results page is created which is something like #search/QUERY/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be?

My jQuery code is:

$(document).ready(function(){
    $("#search").keyup(function(e){
        if(e.keyCode==13){
            var search=$(this).val();
            var query=encodeURIComponent(search);
            var yt_url='search.php?q='+query;
            window.location.hash='search/'+query+'/';
            document.title=$(this).val()+" - My Search Script";
            $.ajax({
                type:"GET",
                url:yt_url,
                dataType:"html",
                success:function(response){
                    $("#result").html(response);
                }
            });
        }
    });
});

When a user reloads the javascript, all variables and functions are reinitialized. JavaScript does not pass variables from page to page. You either need a server side solution, or use JavaScript storage. The later may not work in all browsers.

This is because you are loading the search results dynamically with an AJAX call. If the page gets reloaded, that information gets lost.

A possible solution would be to store the search query and/or results in the user session. Then you will be able to automatically add the content on page reloads.