在选项卡/浏览器关闭时清除 localStorage 但在刷新时不清除

Question

有没有办法检测选项卡关闭事件以清除localStorage. 我需要localStorage跨标签共享数据。window.onbeforeunload事件工作正常，但对我来说有两个问题：

1. 它也会在我不想要的页面刷新时触发。
2. 我不需要选项卡关闭时的确认框。

就像当窗口关闭时一样sessionStorage被清除。同时我可以清除localStorage但不知道要绑定什么事件。我检查了一些已经可用的问题，但似乎没有一个可以解决这个问题，有一些解决方法是通过使用标志来点击链接和表单提交，但不是一种干净的方法。请为此提出任何解决方案。

Answer 1

我知道这是一个老问题，但我只是在为此寻找解决方案，但没有找到任何可以正常工作的方法。然后我想出了一个解决方案，它对我来说很好用。

我所做的是改变视角，而不是在浏览器关闭时清除本地存储，我决定在浏览器打开时清除。用户不会看到差异。

我只是设置了一个在页面加载时检查 sessionStorage 的函数，如果它为空，则该函数会清除 localStorage，然后它会为 sessionStorage 设置一个寄存器，以确保 localStorage 不会因为拥有该页面而再次被清空重新加载。

function clearStorage() {

    let session = sessionStorage.getItem('ref');

    if (session == null) {

        localStorage.removeItem('remove');

    }
    sessionStorage.setItem('ref', 1);
}
window.addEventListener('load', clearStorage);

Answer 2

我能够找到解决方案并考虑分享。由于 window.onbeforeunload 事件在浏览器/选项卡关闭时触发，但也在刷新时触发（我不想要），所以我的本地存储也在 rfresh 时被处理。这是我不想要的。为了克服这个问题，我实现了另外 1 个事件处理程序 window.onload，它仅在刷新时触发，而不是在选项卡/浏览器关闭时触发，在该处我将重置 localStorage，就好像什么也没发生一样。代码是：

window.onbeforeunload = function (e) {
    window.onunload = function () {
            window.localStorage.isMySessionActive = "false";
    }
    return undefined;
};

window.onload = function () {
            window.localStorage.isMySessionActive = "true";
};

我在 window.onbeforeunload 中返回未定义，因为我不希望在选项卡/浏览器关闭和刷新时出现确认弹出窗口。