Call a javascript function on tab /browser close not on reload

Question

I have an issue . I am trying to clear a cookie value on tab close. and i have created a function But it clears value on page reload also . I also tried this solution stack-overflow question

function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires+"; path=/";
}
function unloadPage()
{ 
    var check=getCookie('mycookie')
    if(check)
    setCookie('mycookie','','-2'); 
}
$(document).ready(function() {
    window.onbeforeunload = unloadPage;
});

Function is working but problem is it is also clearing cookie on page reload . but i only want to clear cookie if user close the window.

Thanks.

Please check this post http://stackoverflow.com/questions/6494206/javascript-onclose-event — Narayansingh Rajput, Jan 21 '16 at 09:13
i have checked this . but o want to know if there is any method. — Manoj Dhiman, Jan 21 '16 at 09:37
check if this add any help to your problem http://stackoverflow.com/questions/34129319/how-can-i-handle-browser-tab-close-event-in-angular-only-close-not-refresh — Narayansingh Rajput, Jan 21 '16 at 09:47

score 0 · Answer 1 · answered Jul 21 '22 at 11:16

I have tried multiple solutions like "unload", "onbeforeunload", "performance.getEntriesByType("navigation")[0]" but nothing worked for me.

I was trying it on the multipage web application. What worked is mentioned below: I needed to call logout function on the close tab/browser not reload. On the page where you want to logout set a local storage variable.

localStorage.setItem('isReloaded', true);

Now, on your home page

componentDidMount(){
if(localStorage.getItem('isReloaded') != null){
  this.logout(); //logout function
}

and, inside logout function reset the local storage value

logout(){
 //your logout code
 localStorage.removeItem('isReloaded')
}

score 0 · Answer 2 · edited Sep 19 '22 at 18:34

Have done this on react application and its work for me on index.html file write this in script tag

<script type="text/javascript">
  window.addEventListener("beforeunload", (event) => {
    window.localStorage.isMySessionActive = "true";
  });
  window.onunload = function (e) {
    const newTabCount = localStorage.getItem("tabsOpen");
    if (newTabCount !== null) {
      localStorage.setItem("tabsOpen", newTabCount - 1);
    }
  };
</script>

Then go on main file and write this code

useEffect(() => {
  // define increment counter part
  const tabsOpen = localStorage.getItem("tabsOpen");
  if (tabsOpen == null) {
    localStorage.setItem("tabsOpen", 1);
  } else {
    localStorage.setItem("tabsOpen", parseInt(tabsOpen) + parseInt(1));
  }

  // define decrement counter part
  window.onunload = function (e) {
    const newTabCount = localStorage.getItem("tabsOpen");
    if (newTabCount !== null) {
      localStorage.setItem("tabsOpen", newTabCount - 1);
    }
  };
  if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
    window.localStorage.isMySessionActive = "false";
  } else {
    const newTabCount2 = localStorage.getItem("tabsOpen");
    let value = localStorage.getItem("isMySessionActive");
    if (value == "true") {
      if (newTabCount2 - 1 == 0) {
        localStorage.clear();
        window.localStorage.isMySessionActive = "false";
      } else {
        window.localStorage.isMySessionActive = "false";
      }
    }
  }
}, []);

Call a javascript function on tab /browser close not on reload

2 Answers2