Question

Please check the below code

$(document).ready(function(){
var href;
if(href!=null)
{
setContainerHtml($.cookie("activeElementHref"));
};

$('nav ul li a').click(function(e){
    e.preventDefault();
    href= $(this).attr('href');
    $.cookie("activeElementHref", href) 
    setContainerHtml(href);
});
}); 
function setContainerHtml(href) {
        $.ajax({
        type: "POST",
        url: "baker.php",
        data:{send_txt: href},
        success: function(data){
            $('#aside-right, #intro').css('display','none');
            $('#main-content').fadeOut('10', function (){
            $('#main-content').css('width','700px');
            $('#main-content').css('margin','-30px 0 0 100px');
            $('#main-content').html(data);
            $('#main-content').fadeIn('8000');
            });
        }   
    });
}

The cookie is not working the clicked link state is not preserved when i click refresh index html page is displayed

Answer 1

Href is null instead of empty string:

var href;  // variable is set to null...

if(href != '') // ... null is different than empty string...
{
    // ...so the code always enters here.
    setContainerHtml($.cookie("activeElementHref"));
};

I think it should be:

var href = $.cookie("activeElementHref");  //Read the cookie

if(href !== null) 
{
    setContainerHtml(href );
};