Question

在我的项目中，我有一台服务器和几个带有标签的html页面彼此链接，而index.html是用户用来登录我的服务器的页面。

我的页面是index.html（登录名），home.html（主页），statistics.html（登录的用户可以以表格格式查看来自我的服务器的信息的页面）和notifs.html（其中登录的用户可以查看由我的服务器完成的过去通知的历史记录。

当用户要登录时，请求将发送到我的服务器以登录该用户，并且我收到一个包含用户帐户信息的JSON作为响应，并将其存储在本地存储中；当用户注销时，请求是发送以将其注销，然后从本地存储中删除该对象。

如果用户未登录，则无论他们位于上面提到的页面中的页面如何，都将其重定向到index.html。

我的问题是：每当用户以某种方式离开我项目的任何html页面时，我都需要注销该用户（如果他们离开了页面但转到了我的其他页面，则不应注销它们，但是如果它们进入同一窗口的其他位置，例如访问www.google.com或关闭窗口，则它们应该注销），但用户退出页面时会触发beforeunload事件，当用户离开页面时触发，但无法区分目标是我的页面之一还是其他页面，或者窗口是关闭，因此如果用户尝试转到我项目的其他页面，则该用户将退出。

到目前为止，我还无法得知他们是要转到项目的另一个页面还是另一个页面，或者窗口是否正在关闭……我总是以答案结尾，说我应该使用beforeunload事件并在用户离开页面之前发出警告，而不是注销页面，但是如果用户由于某种原因突然忽略警告，则我的Web应用程序将不得不依赖于本地存储中具有帐户信息的JSON是否仍然存在，否则该用户将无法再次登录，而我想防止这种情况。

这是用于注销用户的代码，我将其放置在页面的所有脚本中，除了index.html之一。（当通过专用按钮调用logoutAccount函数但如果通过beforeunload事件调用该函数时，redirect参数为true，则redirect为false，因为用户不应返回登录页面（在这种情况下为index.html）因为如果转到我项目的页面之一，它们仍然应该登录。）

function logoutAccount(redirect) {
    if(localStorage['loggedAccount']){
        var account=JSON.parse(localStorage['loggedAccount']);
        var logoutRequest=new XMLHttpRequest();
        logoutRequest.open('GET',url+"/logout/"+account.id,false);
        logoutRequest.send(null);
        localStorage.removeItem('loggedAccount');
        if(redirect){
            window.location.replace("index.html");
        }
    }else{
        if(redirect){
            window.location.replace("index.html");
        }
    }
}

document.getElementById("logoutButton").addEventListener("click",function () {
    logoutAccount(true);
});

$(window).on("beforeunload", function() {
    logoutAccount(false);
});

如前所述，这将导致用户在离开页面时注销，即使他们要转到项目的其他页面，这也不是我想要的结果。

这是允许用户登录的代码，该代码位于index.html脚本中：

function onLogin () {
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var data = {};
    data.userName = username.value;
    data.passWord = password.value;
    if(localStorage["AccountTokent"]){
        data.token = localStorage["AccountTokent"];
        localStorage.removeItem("AccountTokent");
    }else{
        data.token="some random generated text";
    }


    var json = JSON.stringify(data);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
            localStorage.setItem('loggedAccount',xhr.responseText);
            window.location.replace("home.html");
        } else if (xhr.status === 401) {
            alert("Wrong password or username");
        }
    };

    xhr.open('POST', url + "/login", false);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.send(json);
}

只要用户登录并在我项目的页面之一上，他们的帐户仍应登录。

例如，如果他们从home.html离开，到www.google.com，则将其注销，这很好，但是，如果他们从home.html离开到notifs.html，则将它们注销并重定向到索引.html，这是我要防止的。

用户离开某些网页时如何触发事件？

0 个答案: