javascript - localStorage - issue with a loop and message to display-CodePudding

In the script below, I try to record in the bowser the name of the users who connect to my application. If it is the first time that a user connects, when he presses the "submit" button to connect to the application I want a message "Welcome" name "! If the user has already connected (his name is already registered in the localStorage), when he presses the submit button, I want a "Welcome back" name "!

When I run the code below, I have a problem with the loop, if I entered 3 times the name of Rachel in the localStorage, I will have the following welcome message: Welcome Rachel Rachel Rachel! when I want to have the message Welcome Rachel! How can I modify my code to correct this problem?

When I run my code, I also notice that my code to display the welcome back message does not work. It is always the welcome message that appears.

Thank you in advance for your advice.

JS script:

let myButton = document.getElementById ("myButton");
let myText = document.getElementById ("username");

function store() {
    let n = 0;
    while (localStorage.getItem("username"   n)) {
        n  ;
}
localStorage.setItem("username"   n, myText.value);
}  

function welcomeUsername(){
    let resultMessage = "Welcome "
    let value = localStorage.getItem("username")
    let n = 0;
    while (localStorage.getItem("username"   n)) {
        n  ;
    if(myText.value != value){
        resultMessage  = myText.value   "!";
    }
    resultMessage  = "back"   myText.value   "!";
}
alert(resultMessage);  
   
}
myButton.addEventListener ("click", store);
myButton.addEventListener ("click", welcomeUsername);

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
<body>
    <br />
    <br /> 
    <div class ="login_card"></div> 
    <div class = "log_head">
    <h1>Login</h1> 
    </div>
    <div class = "log_body">
    <br />
<label for="uname"><b>Please enter your username below and click on submit:</b></label> <br>
<input type="text" value = "Enter username" onfocus = 'this.value =""' id = "username"> <br>
<br> <br>
<input type="button"  onClick="welcomeUsername();location.href ='/index';" value = "Submit" id = "myButton">
</div>

</div>

CodePudding user response：

this part of your code has problem let value = localStorage.getItem("username"). you cant get any value from your localstorage since you set them 'username' n, that;s why your if statement always run. can you try this: while (n) {let user = localStorage.getItem("username" n); if (myText.value == user) {resultMessage = myText.value; break; } else {resultMessage = "back" myText.value "!"; n ; }}

CodePudding user response：

Try this.

const btn = document.getElementById('myButton');

// get a welcome message
const welcomeText = (name) => {
  // store the name as an array type, initialize if it does not exist
  let names = localStorage.getItem('usernames');
  names = names == null ? [] : names;
  // check if the name exists and decide the welcome message according to the result
  if (names.includes(name)) {
    return `Welcome back ${name}`;
  } else {
    // update storage information
    names.push(name);
    localStorage.setItem('usernames', names);
    return `Welcome ${name}`;
  }
};

// send name and call method
const submit = () => {
  const name = document.getElementById('username').value;
  alert(welcomeText(name));
};

btn.addEventListener('click', submit);