How to refresh only a part of the page when F5 or refresh button is pressed

I'm designing开发者_运维知识库 a web application that has a shared menu for all pages. Due to this i decided to load the contents linked by the menu buttons inside a div, using jquery.

So, I have this:

     $("#AddNewProductBtn").click(function() {
       $("#content").load("addproduct.html");
   });

I want to keep track of the page displayed inside the "#content" div. If the users refreshes the page I want to load the same page in "#content". Is there any way to do this, or is there any workaround?

I saw some websites that use an iframe to load the pages, but when a user clicks a button in the menu the url is also changed. I didn't find any info on how to do that.

Thanks

Here's a solution for the F5 and CTRL+R

$(document).keydown(function(e) {
    if (e.which == 116 || e.keyCode == 82 && e.ctrlKey) { //116 = F5
        $("#content").load("addproduct.html");
        return false;
    }
}); 

You should append parameter to the hash part of the url (after #), for example domain.com/index.php#addproduct

Then on document.ready check the value after # and load the corresponding content.

Some plugins like jQuery history use this technique.

Additionally, you can leverage the local storage and cache parts of the code at the browser, so you won't load the content with AJAX call the second time.

Alternatively, instead of using a hash, you can use the HTML5 history API (pushState, replaceState, and popstate). Basically, it's a hash with some improvements (for one, indexable by search engines).

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
http://www.w3.org/TR/html5/history.html