En el siguiente script, trato de registrar en el navegador el nombre de los usuarios que se conectan a mi aplicación. Si es la primera vez que un usuario se conecta, cuando presiona el botón "enviar" para conectarse a la aplicación quiero un mensaje "¡Bienvenido" + nombre + "! Si el usuario ya se conectó (su nombre ya está registrado en el localStorage), cuando presiona el botón Enviar, ¡quiero un "Bienvenido de nuevo" + nombre + "!
Gracias por los comentarios a continuación, traté de tenerlos en cuenta. Cuando ejecuto el código actualizado a continuación, solo aparece la bienvenida en el mensaje. El nombre del usuario no se incluye en el mensaje. ¿Cómo puedo modificar mi código para corregir este problema?
Gracias de antemano por su consejo.
Guión JS:
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 n = 0; while (n) { let user = localStorage.getItem("username" + n); if(myText.value != user){ resultMessage += myText.value + "!"; break; } else { resultMessage += "back" + myText.value + "!";n++; } } alert(resultMessage); }Código HTML:
<!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>esta parte de su código tiene un problema let value = localStorage.getItem("username") . no puede obtener ningún valor de su almacenamiento local ya que los configuró 'username'+n , es por eso que su declaración if siempre se ejecuta. puedes probar esto: while (n) {let user = localStorage.getItem("username" + n); if (myText.value == user) {resultMessage += myText.value; break; } else {resultMessage += "back" + myText.value + "!"; n++; }}
Prueba esto.
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);