Question

我有一个登录页面，该页面可以进行验证，如果提交了正确的凭据，则将用户重定向到另一个页面，创建一个会话，并且将登录按钮更改为在每个页面上注销，并将onclick事件侦听器添加到它。事件监听器清除会话。

由于某种原因，当用户成功登录并重定向后，将创建该会话，但是如果刷新页面或用户导航到另一个页面，则无需单击注销按钮即可清除会话。似乎无法弄清楚这是为什么...

这是代码：

<body>
    <!--Depending on sessions hide login and show logout / vice versa -->
    <div class="Header-nav-inner">
        <a id="login" href="/login" class="Header-nav-item Header-nav-item--active" data-test="template-nav">Login</a>
    </div>
    <form onsubmit="validate()">
        <h3>Email</h3><input type="email" id="email" /><br />
        <h3>Password</h3><input type="password" id="password" />
        <input type="submit" value="Login">
    </form>
</body>

<script>
    if (key[1] == document.getElementById('email').value
                        && key[2] == document.getElementById('password').value) {
                        alert('correct')
                        //Set session for email, name and date of birth
                        sessionStorage.setItem('email', key[1])
                        sessionStorage.setItem('name', key[3])
                        sessionStorage.setItem('dateOfBirth', key[4])
                        //window.location.replace("somewhere")
                    } else {
                        c += 1;
                        if (c == results.data.length) {
                            alert('Wrong username or password!')
                        }
                    }

    let sessionEmail = sessionStorage.getItem('email')
    let sessionName = sessionStorage.getItem('name')
    let sessionBirth = sessionStorage.getItem('dateOfBirth')

    var loginBtn = document.getElementById("login");
    if (sessionStorage.getItem('email') != null) {
        loginBtn.innerHTML = "LOGOUT";
        loginBtn.onclick = logout();
    } else {
        loginBtn.innerHTML = "LOGIN"
    }

    function logout() {
        sessionStorage.clear();
    }
</script>

Answer 1

替换下面的行

loginBtn.onclick = logout();

使用

loginBtn.onclick = logout;

尽管未单击按钮，但按钮onclick事件正在执行[JavaScript]

1 个答案: