登录javascript后在frontpage上显示用户名

成功登录后显示用户名时出现问题。希望您能提供一些指导。我刚刚用javascript创建了一个小的“UserDB”，应该从中收集显示的名称。如果需要，我也可以链接我的登录页面。谢谢你们，谢谢你们的帮助。 马蒂亚斯

HTML:

我的用户数据库：

class User {
    constructor(brugernavn, kodeord){
        this.brugernavn = brugernavn;
        this.kodeord = kodeord;
    }
}
if(localStorage.getItem('User') == null) {
    var userList = [];
    userList.push(new User('Alexandra', 'alexandra123'));
    userList.push(new User('Magnus', 'magnus123'));
    userList.push(new User('Mathias','mathias123'));
    userList.push(new User('Kasper','kasper123'));
    userList.push(new User('123','123'));


    var userListString = JSON.stringify(userList)
    localStorage.setItem('User', userListString)
}

---

我看不到您试图在代码中调用此

LogIn

方法的位置。只有

注销

。如果可以，请显示包含此函数的代码。或者你想在用户

注销后显示用户名
？如果你想进入下一页，那么在cookies中获取并设置用户名，并在下一页中获取值。我的登录页面如下所示：HTML:CSS:JS:af在“userDB”中的5个用户中的1个成功登录后，你将被转发到我在第一篇文章中链接到的frontpage。我不太确定如何调用LogIn方法。
body
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.container
{
    position: relative;
    width: 1200px;
    height: 300px;
    margin: 50px auto;

}
/* Definerer formen for alle bokse */
.container .box
{
    position: relative;
    width: calc(400px - 30px);
    height: calc(300px - 30px);
    background: #000;
    float: left;
    margin: 15px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
}
/* Definerer den enkelte boks */
.container .box .icon
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    transition: 0,5s;
    z-index: 1;
}
/* hover settings - Mouseover funktion */
.container .box:hover .icon
{
    top: 20px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.container .box .icon .fa
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 80px;
    transition: 0,5s;
    color: #fff;
}
.container .box:hover .icon .fa
{
    font-size: 40px;
}
.container .box .content
{
    position: absolute;
    top: 100%;
    height: calc(100%-100px);
    text-align: center;
    padding: 25px;
    box-sizing: border-box;
    transition: 0,5s;
    opacity: 0;
}
.container .box:hover .content
{
    top: 100px;
    opacity: 1;

}
.container .box .content h3
{
    margin: 0 0 10px;
    padding: 0;
    color: #fff;
    font-size: 24px;
}
.container .box .content p
{
    margin: 0 0 10px;
    padding: 0;
    color: #fff;
}
.container .box:nth-child(1) .icon
{
    background: #B18904;
}
.container .box:nth-child(1)
{
    background: #B18904;
}
.container .box:nth-child(2) .icon
{
    background: #4967AA;
}
.container .box:nth-child(2)
{
    background: #4967AA;
}
.container .box:nth-child(3) .icon
{
    background: #BCBCBA;
}
.container .box:nth-child(3)
{
    background: #BCBCBA;
}

.header {
    padding: 40px;
    text-align: center;
    background: #4967AA;
    color: white;
}

.header h1 {
    font-size: 40px;
}

#logUd{

    position:fixed;
    right:1%;
    top:1%;
    float: right;
}

class User {
    constructor(brugernavn, kodeord){
        this.brugernavn = brugernavn;
        this.kodeord = kodeord;
    }
}
if(localStorage.getItem('User') == null) {
    var userList = [];
    userList.push(new User('Alexandra', 'alexandra123'));
    userList.push(new User('Magnus', 'magnus123'));
    userList.push(new User('Mathias','mathias123'));
    userList.push(new User('Kasper','kasper123'));
    userList.push(new User('123','123'));


    var userListString = JSON.stringify(userList)
    localStorage.setItem('User', userListString)
}