How to get logged in username to print in HTML file?-CodePudding

I'm trying to print the value of currently logged in username in my main.html file. My login.html file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form Validation</title>
    <link rel="stylesheet" href="login.css">
    <script defer src="login.js"></script>
</head>
<body>
    <main id="main-holder">
        <h1 id="login-header">Login</h1>
        
        <div id="login-error-msg-holder">
          <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
        </div>
        
        <form id="login-form">
          <input type="text" name="username" id="username-field"  placeholder="Username">
          <input type="password" name="password" id="password-field"  placeholder="Password">
          <input type="submit" value="Login" id="login-form-submit">
        </form>
      </main> 
    
</body>
</html>

And the .js file looks like this:

const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");


loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    const username = loginForm.username.value;
    const password = loginForm.password.value;

    if (username === "Erkki_Esimerkki" && password === "projekti") {
        window.location.href = "main.html";
       /* location.reload();*/
    } else {
        loginErrorMsg.style.opacity = 1;
    }
})

The username should be printed in a p element in my main.html which the user is directed after logging in through the login.html.

I tried creating a function in my login.html like so:


function getUsername() {
    let username = document.getElementById("username-field").value
    document.getElementById("userinfo").innerHTML  = username
}

And calling the function in my main.js.

CodePudding user response：

You can use localStorage to store the username and then retrieve it in the main.html file.

You can use the setItem method to store the username in the localStorage and the getItem method to retrieve it.

// login.js
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");

loginButton.addEventListener("click", (e) => {
  e.preventDefault();
  const username = loginForm.username.value;
  const password = loginForm.password.value;

  if (username === "Erkki_Esimerkki" && password === "projekti") {
    localStorage.setItem("username", username);
    window.location.href = "main.html";
  } else {
    loginErrorMsg.style.opacity = 1;
  }
});

// main.js

const username = localStorage.getItem("username");
document.getElementById("userinfo").innerHTML  = username;

CodePudding user response：

You will need to somehow maintain the values. Since you did not specify a server-side technology, I will answer you using Javascript:

loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    const username = loginForm.username.value;
    const password = loginForm.password.value;

    if (username === "Erkki_Esimerkki" && password === "projekti") {
        localStorage.setItem("username", username);
        window.location.href = "main.html";
       /* location.reload();*/
    } else {
        loginErrorMsg.style.opacity = 1;
    }
})

And on the other page:

document.write(`<p>${localStorage.get("username")}</p>`);