如何在javascript中检测浏览器选项卡是否关闭或浏览器窗口

Question

我有一个将用户数据存储在浏览器本地存储中的应用程序。因此，用户甚至可以跨浏览器选项卡和窗口获取这些数据。但我想做的是当用户关闭浏览器窗口时清除 localStorage。

我使用

beforeunload

函数来实现此目的，但它也会在选项卡关闭时触发。

所以，如果有什么方法可以检测浏览器选项卡是否关闭或浏览器窗口是否关闭，请帮助我。

PS：我无法使用 sessionStorage，因为它会在浏览器选项卡关闭时销毁。

Answer 1

在浏览器中使用会话存储。
这里您不想捕获浏览器选项卡关闭事件。会话存储数据在打开的选项卡的会话中持续存在

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

我从Here

获取这些示例代码

仅在浏览器关闭时清除

localStorage.removeItem(key);

希望这对你有帮助

Answer 2

window.addEventListener('beforeunload', function(event) {
  if (event.currentTarget.performance.navigation.type === 1) {
    return;
  }
  console.log('closed and cleared');
  localStorage.clear();
});