how to delete jquery cookie on tab close

Question

My cookie is working fine i m not mentioning date so when the browser window is closed the cookie is deleted.

but when i close a tab in a browser window the cookie is not deleted and open the same preserved cookie state page when i open the website

How to delete a cookie when a user closes a Browser tab ?

Below is my code

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

$('nav ul li a').click(function(e){
    e.preventDefault();
    href= $(this).attr('href');
    $.cookie("activeElementHref", href) 
    setContainerHtml(href);
});

}); 
$(window).unload(function() {
$.cookies("activeElementHref",null);
});

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');
            });
        }   
    });
}

Answer 1

You have to delete the cookie on .unload event

$(window).unload(function() {
   $.cookies.del('myCookie');
});

Answer 2

The previous answers assume that your cookies are not marked as http-only. If you want to prevent XSS attacks, you should probably set your cookies as http-only, and changing the cookies via javascript will not work.

The solution is to delete the cookie from the server, which will require an HTTP request before the tab is closed.

Most JS libraries will use asynchronous HTTP requests, which will cause the tab to be closed before receiving the expired cookie from the server, so asynchronous calls will not work reliably.

The only way that I was able to make it work reliably (at least on Chrome) was by making a synchronous call:

window.onbeforeunload = function () {

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "api/logout", false);
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.send();
}

Just make sure to keep your Logout endpoint in your server simple so the response is fast and the UI is not blocked for too long.

Edit: as mentioned before, using onbeforeunload to kill the cookies should only be used if it's a single-page application.