how to delete cookie in jquery at the time of browser closing?

Question

I have created a cookie by using jQuery. I want to delete the cookie with jQuery when the browser closes. How do I do this?

I've written the following script:

$(function () {
         if ($.cookie('toggle') == "toggle") {
             $('#toggleText').show();
             $('#displayText').text("Less");
         }
         else {
             $('#toggleText').hide();
             $('#displayText').text("More");
         }
         $('#displayText').click(function () {
             if ($(this).text() == "More") {
                 $('#toggleText').show();
                 $(this).text("Less");
                 $.cookie('toggle', 'toggle');

             } else {
                 $('#toggleText').hide();
                 $(this).text("More");
                 $.cookie('toggle', 'nottoggle');

             }
         });

     })

The cookie should also not be deleted when the user refreshes the browser.

Thanks.

Answer 1

What you are talking about is a transient cookie - cookies are transient (they are removed when the browser is closed) when you set a cookie with no expiry date. They exist for the current browser session only

If you are using this implementation -> http://code.google.com/p/cookies/wiki/Documentation

They provide a delete method :

$.cookies.del('myCookie');
//deletes a cookie, 'myCookie', with default options

Or removing a cookie using pure JavaScript :

document.cookie = "myCookie=; expires=Thu, 01-Jan-70 00:00:01 GMT;";

There is an unload event that you can bind to that will allow you to remove the cookies when the browser closes -

The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.

Example :

$(window).unload(function() {
 // delete your cookie here
});

Update ....

It seems that using session cookies with the jQuery plugin isnt as simple as it should be ... i think that using a plugin for such a simple task is a waste of bandwidth (I know its only a couple of KB - but thing of the poor mobile users) .. these are the 2 methods I always use for getting / setting cookies :

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}


function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

And using these methods is very simple ....

setCookie('myCookie','myvalues',5); 
// the 5 is the number of days in the future the cookies should be removed
// leave this parameter out or set to null for transient cookie

myvalues = getCookie('myCookie');

Another Update ....

Its not that difficult with the jQuery plugin, you just need to set some options :

var newOptions = {
  expiresAt: null
};
$.cookies.setOptions(newOptions);
or 
$.cookies.setOptions({expiresAt: null});

Answer 2

If you want delete cookie when you close browser than you should set a session cookie, which automatically expires when browser closed. But if you want delete cookie when you close a tab than you should use window.unload and window.beforeunload events, write a function to delete necessary cookies and attach to these events.