Clearing SESSION variables when a tab is closed

Question

I need to clear the session variables when the tab is closed but I could not find any solutions so far. The closest I have got is by using the "onbeforeunload" function is javascript.

<body onbeforeunload='destroySession()'>
    <!--Codes for the site includeing php scripts-->
</body>
<script type='text/javascript'>
    function destroySession(){
        $.ajax({
           url: "destroySession.php"
        });
     }
<script>

The problem is the function is called every time a new link is clicked, refreshed or even if a form is submitted. Is there a better way to destroy session variables on closing a tab or am I doing something wrong? Please help.

Just trust me, stop. You're **not** going to be able to do this reliably and completely. You *can* detect how the page is being navigated away from in some ways (clicking a link, submitting a form, etc.), but you won't be able to distinguish between "closing the tab" and "navigating" and many other events. It's unfortunate that we can't do this kind of thing (because it would be nice to clear a session like you ask), but things aren't set up to work properly. Remember, this is a website, not a desktop application — Ian, Aug 16 '13 at 14:56
possible duplicate of [Close/kill the session when the browser or tab is closed](http://stackoverflow.com/questions/1921941/close-kill-the-session-when-the-browser-or-tab-is-closed) — Jamie Taylor, Aug 16 '13 at 14:56
Rather than detecting the user leaving the site, do it the correct way and instead time them out after a set period of time \**Hint: you don't actually have to do anything to make this happen!* using tab close is going to be troublesome when someone opens your application in two tabs at once (which isn't uncommon), then decides to close one of the two. — Kevin B, Aug 16 '13 at 14:57
Tell us 'why' you are trying to do this because there may be a standard practice you are missing out on. — Flosculus, Aug 16 '13 at 14:59
You may want to use a session cookie: http://en.wikipedia.org/wiki/HTTP_cookie#Session_cookie Session cookies are automatically cleared up by the browser when the browser window is closed. This may be good enough for your use case? — DigitalZebra, Aug 16 '13 at 15:03
@Flosculus I have some of the user's login values stored in the session variables. If the tab in which the user is logged in is closed and a new tab is opened in the same browser then those value still seem to exist. That is why I am trying to destroy the session variables after the tab is closed. — Bhuns, Aug 16 '13 at 15:15
I think you will have more luck destroying the session when the new tab is opened, rather than when the old one is closed. But go further back to why this needs to happen at all. — Flosculus, Aug 16 '13 at 15:19
Technically there's no difference between closing a tab and opening a new one for the same page and clicking a link to go to another page. Both times you're *leaving* one page and arrive at another. The web is stateless, it doesn't matter how long you leave a page open. — deceze, Aug 16 '13 at 16:35

score 4 · Accepted Answer · edited May 23 '17 at 11:52

There is no secure way of handling what you are looking for. onbeforunload event executes every time you leave the page. (I had similar problem like this yesterday for one of my projects). The closest you can get is to control how the users leave the page.

See this link posted by lan in some of the comments. And check the answer by Daniel Melo That is as close you can get with the solution from this problem.

I also found this link but its basically the extraction of the answers given in stackoverflow.

Hope this helps.

score 1 · Answer 2 · answered Aug 16 '13 at 14:58

1

Unfortunately, there is no way to prevent page refresh (caused by form submit or any other navigation) from calling "onbeforeunload".

answered Aug 16 '13 at 14:58

Max Malyk

860
5
8

however you can somewhat detect whether or not it was due to a form post or anchor click. – Kevin B Aug 16 '13 at 14:59

score -1 · Answer 3 · answered Aug 16 '13 at 15:18

Yep you can do it,

</head>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">

var validNavigation = false;

function endSession() {
// Browser or broswer tab is closed
// Do sth here ...
alert("bye");
}

function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
window.onbeforeunload = function() {
  if (!validNavigation) {
     endSession();
  }
 }

// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
  validNavigation = true;
}
});

// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});

 // Attach the event submit for all forms in the page
 $("form").bind("submit", function() {
 validNavigation = true;
 });

 // Attach the event click for all inputs in the page
 $("input[type=submit]").bind("click", function() {
 validNavigation = true;
 });

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();  
}); 
</script>    
</head>
<body>
<h1>Eureka!</h1>
  <a href="http://www.google.com">Google</a>
  <a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>

Clearing SESSION variables when a tab is closed

3 Answers3

Linked