登录成功后如何在首页展示“Welcome {username}”？

现有如下登录表单提交的JavaScript代码：

loginForm.onsubmit = function(event) {
    event.preventDefault() 

    var emailLoginInput = loginForm.querySelector('#email')
    var passwordLoginInput = loginForm.querySelector('#password')

    var emailLogin = emailLoginInput.value 
    var passwordLogin = passwordLoginInput.value

    emailLoginInput.value = ''
    passwordLoginInput.value = ''

    var checkEmailAndPassword = users.some(u => u.email === emailLogin && u.password === passwordLogin)

    if (checkEmailAndPassword) {
        
        registerView.style.display = 'none'
        loginView.style.display = 'none'
        homeView.style.display = 'block'

        var userLog = {
            username: users.find(user => user.email === emailLogin && user.password === passwordLogin).username
        }

        userLogin.push(userLog)
    } else { 

        document.getElementById('login').querySelector('p').innerText = 'Error: Email or password wrong. Try again'
    }
}

document.body.addEventListener('click', function() { 
    document.getElementById('login').querySelector('p').innerText = 'Introduce your email and password:';
});

当使用邮箱和密码成功登录后，希望进入首页并显示“Welcome {username}”（其中username为刚登录用户的用户名）。请问需在index.html中编写哪些JavaScript代码，才能在首页（对应页面/容器为home）显示“Welcome”并紧跟userLogin[0].username（当前登录用户）的内容？

你可以通过修改登录成功的逻辑代码，新增渲染欢迎语的逻辑来实现需求，具体操作如下：

1. 确保首页容器存在 #

首先确认你的index.html中已经有对应首页的容器，比如：

<div id="home"></div>

2. 修改登录成功代码块 #

在登录成功的if分支里，添加代码将欢迎语插入到home容器中。为了避免重复查找用户信息，还可以优化一下用户信息的获取逻辑：

if (checkEmailAndPassword) {
    
    registerView.style.display = 'none'
    loginView.style.display = 'none'
    homeView.style.display = 'block'

    // 一次性找到当前登录用户，避免重复调用find方法
    const currentUser = users.find(user => user.email === emailLogin && user.password === passwordLogin)
    var userLog = {
        username: currentUser.username
    }

    userLogin.push(userLog)

    // 新增：渲染欢迎语到home容器
    const homeContainer = document.getElementById('home')
    // 清空容器原有内容，防止重复登录时内容叠加
    homeContainer.innerHTML = ''
    // 创建欢迎文本元素并添加到容器
    const welcomeElement = document.createElement('h2')
    welcomeElement.textContent = `Welcome ${currentUser.username}`
    homeContainer.appendChild(welcomeElement)
}

3. 可选：页面加载时自动显示欢迎语 #

如果希望用户刷新首页时，仍能看到欢迎语，可以添加一段页面加载监听代码：

window.addEventListener('load', () => {
    // 检查是否有已登录的用户信息
    if (userLogin.length > 0) {
        const homeContainer = document.getElementById('home')
        homeContainer.innerHTML = `<h2>Welcome ${userLogin[0].username}</h2>`
    }
})

这样不管是登录成功后跳转首页，还是直接刷新首页，只要userLogin数组中存在当前登录用户的信息，就能显示对应的欢迎文本。

内容的提问来源于stack exchange，提问作者Abel Prieto Martín