PHP Include to change DIV contents but hold contents on refresh

Question

I am creating a very basic site for a Uni module and currently have a simple onClick Javascript being used to change the contents of the main content DIV. The simple script is calling a PHP Include file to fill the DIV.

HTML

<div id="content" class="colorPicker1">
<!--Populate content div on load-->
<?php include 'php/home.php' ?>
</div>

<a href="winInstall.html" onClick="$('#content').load('php/winInstall.php'); return false;" title="Windows only installation">Windows 7/8</a>

The problem I have and am not able to figure out is when I refresh the page, which ever it is on, the site returns to the home.php file. I understand that this is going to happen because I am calling the home.php file in the index.html file.

My question is how can I hold the current php file during a refresh?

I was thinking of using localStorage to hold the link being use but my attempts didnt work. Could someone please give me a little guidance on this please.

Cheers in advance,

Blinky

Answer 1

Instead of a cookie or localStorage, how about changing the hash?

<a href="winInstall.html" class="ajax-link" title="Windows only installation">Windows 7/8</a>
<script>
(function ($) {
    var load_page = function (path) {
        location.hash = '#'+path;
        $('#content').load('php/'+path.replace('.html', '.php'));
    };

    $('.ajax-link').click(function (v) {
        v.preventDefault();
        load_page($(this).attr('href'));
    });

    if (location.hash && location.hash != '#') {
        load_page(location.hash.substr(1));
    }
})(jQuery);
</script>