Set Page Variable With JS/JQuery

I have an html page that is basically a wrapper. I have tabs on the page, that when clicked uses the JQuery.load function to load a particular page in a subdirectory. This allows me to change content to suit a partticular page view without having to refresh the page or set session variables. However, if I do refresh the page, I'm back to viewing the wrapper's default content.

How can I set a variable using JQuery that will allow me to check if that variable is set, and if so, immediately load page when the window refreshes? I think I managed to find a way to do this via PHP by calling an additional AJAX call that sets a PHP session when a tab is clicked, but I am trying to get away from that.

TIA.

You could try using cookies to save the state of your page.

In your JQuery.load callback function you could set the cookie and you can check this cookie when the page first loads to find out which tab to open:

//Store page state when loading tab using Ajax
function loadTab(tabVal)
{
    $.load("www.example.com" + tabVal, 
        function(){
            document.cookie=tabVal;
            //...rest of your your load logic
        }
    );
}

//On document ready, check cookie to determine which page to load
$( 
    function(){
        var pageState = document.cookie;
        if( pageState ){
            loadTab(pageState);
        }
    }
);

Check out the jQuery BBQ plugin. The "page variable" that you're talking about could be the url hash. Example: http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/