在选项卡/浏览器关闭而不是重新加载时调用 javascript function

Question

我有一个问题。 我正在尝试清除选项卡关闭时的 cookie 值。 我创建了一个 function 但它也清除了页面重新加载的值。 我也试过这个解决方案堆栈溢出问题

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 正在工作，但问题是它也在页面重新加载时清除 cookie 。 但我只想在用户关闭 window 时清除 cookie。

谢谢。

Answer 1

我尝试了多种解决方案，例如“ unload ”、“ onbeforeunload ”、“ performance.getEntriesByType("navigation")[0] ”，但对我没有任何帮助。

我在多页网络应用程序上尝试它。 下面提到了有效的方法：我需要在关闭选项卡/浏览器上调用注销功能而不是重新加载。 在要注销的页面上设置本地存储变量。

localStorage.setItem('isReloaded', true);

现在，在您的主页上

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

并且，内部注销功能重置本地存储值

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

Answer 2

已在 react 应用程序上完成此操作，并在 index.html 文件上为我工作，将其写入脚本标签

<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>

然后在主文件上 go 并编写此代码

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";
    }
  }
}

}, []);