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

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

本文关键字：加载 新加载 函数 javascript 调用 选项 浏览器      更新时间：2023-09-26

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

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

功能正在工作，但问题是它也在页面重新加载时清除cookie。 但我只想在用户关闭窗口时清除cookie。

谢谢。

我已经尝试了多种解决方案，例如" unload"，"onbeforeunload"，"performance.getEntriesByType("navigation")[0] "，但没有任何效果。

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

localStorage.setItem('isReloaded', true);

现在，在您的主页上

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

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

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

在 react 应用程序及其对我的工作上完成了此操作在索引上.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>

然后继续主文件并编写此代码

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";
      }
    }
  }
}, []);
相关文章：