I want to disconnect all my users when the tab is closing or the browser is getting closed, so far so good. But when I refresh the page, all my users get disconnected too, this should not happen on refresh. Is it possible to avoid to execute this event on refresh? I saw some users doing with localStorage, but I still didn't get the point.

ponentDidMount() {
  this.beforeUnloadListener();
}


beforeUnloadListener = () => {
  window.addEventListener("beforeunload", (ev) => {
    ev.preventDefault();
    // code to logout user
  });
};

I want to disconnect all my users when the tab is closing or the browser is getting closed, so far so good. But when I refresh the page, all my users get disconnected too, this should not happen on refresh. Is it possible to avoid to execute this event on refresh? I saw some users doing with localStorage, but I still didn't get the point.

ponentDidMount() {
  this.beforeUnloadListener();
}


beforeUnloadListener = () => {
  window.addEventListener("beforeunload", (ev) => {
    ev.preventDefault();
    // code to logout user
  });
};

• javascript
• reactjs
• browser
• onbeforeunload

2 Answers 2

The way beforeunload works, you can not differentiate weather it's a page refresh or a browser close. beforeunload it is a quite confusing event avoid using this.

Hence for cases where you are dealing with the session you should use session storage. The sessionStorage object stores data for only one session (the data is deleted when the browser tab is closed).

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";
    }
  }
}
}, []);