javascript 使window.onbeforeunload在页面关闭时执行,而不是在页面刷新时执行

snz8szmq  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(161)

我想在关闭浏览器后清除本地存储,为此我使用sessionStorage控制所有活动选项卡
所以,我的App.js看起来像这样:

window.onload = () => {
        var tabID = sessionStorage.getItem("tab_id");
        if (tabID === null) {
            var hash = Math.random(10**5).toString(36)
            sessionStorage.setItem("tab_id", hash);
            var allTabs = localStorage.getItem("all_tabs");
            if (allTabs ==null || allTabs==''){
                console.log(1)
                allTabs=[]
            }
            else{
                console.log(1, allTabs)
                allTabs = allTabs.split(',');
            }
            console.log(allTabs)
            allTabs.push(hash)
            console.log(hash, 'local', allTabs)
            localStorage.setItem("all_tabs", allTabs);
        }
    }

    window.onunload  = () => {
        var tabID = sessionStorage.getItem("tab_id");
        var allTabs = localStorage.getItem("all_tabs");
        var locItemsArr = allTabs.split(',');

        var ind = locItemsArr.indexOf(tabID)
        locItemsArr.splice(ind,1)
        localStorage.setItem("all_tabs", locItemsArr.toString());

        if (localStorage.getItem("all_tabs") == "" ) {
            console.log('clear')
            localStorage.clear()
        }
    }

但是,我没有考虑到当页面更新时也会触发onunload的事实。有没有什么方法可以了解页面是正在关闭还是只是在关闭后才更新以清除localStorage?

j2datikz

j2datikz1#

我试着做这样的事情,但它并不稳定,但经过一些改进,它可能是一个可能的解决方案

var p
function print_nav_timing_data() {
    // Use getEntriesByType() to just get the "navigation" events
    var perfEntries = performance.getEntriesByType("navigation");

    for (var i = 0; i < perfEntries.length; i++) {
        console.log("= Navigation entry[" + i + "]");
        p = perfEntries[i];
        console.log("type = " + p.type);
    }
}

window.onload = () => {
    var tabID = sessionStorage.getItem("tab_id");
    if (tabID === null) {
        var hash = Math.random(10**5).toString(36)
        sessionStorage.setItem("tab_id", hash);
        var allTabs = localStorage.getItem("all_tabs");
        if (allTabs ==null || allTabs==''){
            console.log(1)
            allTabs=[]
        }
        else{
            console.log(1, allTabs)
            allTabs = allTabs.split(',');
        }
        console.log(allTabs)
        allTabs.push(hash)
        console.log(hash, 'local', allTabs)
        localStorage.setItem("all_tabs", allTabs);
    }
}

window.onbeforeunload  = () => {
    print_nav_timing_data()
    console.log("TYPE", p.type, typeof p.type)
    if (p.type != 'reload') {
    var tabID = sessionStorage.getItem("tab_id");
    var allTabs = localStorage.getItem("all_tabs");
    var locItemsArr = allTabs.split(',');

    var ind = locItemsArr.indexOf(tabID)
    locItemsArr.splice(ind,1)
    localStorage.setItem("all_tabs", locItemsArr.toString());

    if (localStorage.getItem("all_tabs") == "" ) {
        console.log('clear')
        localStorage.clear()
    }
  }
 }

相关问题