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

Possible duplicate of: http://stackoverflow.com/questions/805895/how-come-closing-a-tab-doesnt-close-a-session-cookie — Kyle R, Feb 06 '12 at 09:31
Have you ever found a solution for this? I have the same issue, I only need the cookie to be deleted on tab close, not on page refresh — Jeff, May 25 '16 at 14:06

score 6 · Answer 1 · answered Feb 28 '17 at 06:09

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.

a good answer, however sync request on tab close may be unacceptable UX — Elliott Beach, Apr 08 '19 at 17:59
Thanks to Google this pattern longer works: I get a JavaScript error: "Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://mysite.tld/': Synchronous XHR in page dismissal. See https://www.chromestatus.com/feature/4664843055398912 for more details." — Code4R7, Aug 08 '21 at 11:09

score 6 · Accepted Answer · edited Feb 06 '12 at 09:39

6

You have to delete the cookie on .unload event

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

edited Feb 06 '12 at 09:39

beryllium

29,669
15
106
125

answered Feb 06 '12 at 09:36

Yorgo

2,668
1
16
24

1

I added the Window.unload event but when i refresh, the window is unloaded and the cookie is deleted not even preserving the state – Bandayar Feb 06 '12 at 09:51
1

refresh the page is also unload the page first. – Yorgo Feb 06 '12 at 10:11
2

The unload event even deletes that cookies on page refresh for which i have set the cookies – Bandayar Feb 06 '12 at 10:22
be careful with `onunload` & `onbeforeunload` events they fire even when you don't really expect it, when your application is not one-page-app. On browser's back button, when you actually on the same website, you will get it triggered as well – Farside Dec 21 '16 at 09:19
'unload' event will be called on tab close, browser close and on refresh as well. Not a suitable way. – jay rangras May 14 '20 at 10:31

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

you can call delete cookies function on onunload & onbeforeunload events.

the function to delete cookies is here how to delete cookie in jquery at the time of browser closing?

edited May 23 '17 at 12:10

Community

1
1

answered Feb 06 '12 at 09:34

Hemant Metalia

29,730
18
72
91

I added the Window.unload event but when i refresh, the window is unloaded and the cookie is deleted not even preserving the state – Bandayar Feb 06 '12 at 09:47

how to delete jquery cookie on tab close

3 Answers3

Linked