JS localStorage循环实现登录欢迎消息显示异常问题

你代码里提示只显示"Welcome "的核心原因非常明确：
welcomeUsername函数里定义循环初始值let n = 0，但循环判断条件写的是while (n)，JavaScript里数字0会被判定为假值，整个循环体从一开始就不会执行，后面拼接用户名、判断是否老用户的逻辑全没跑，自然只能弹初始定义的"Welcome "字符串。

除此之外还有几个连带的逻辑bug：

• 你写的store()存储函数全程没有被调用，就算循环逻辑正常，首次登录的用户名也存不进localStorage
• 拼接"back"的时候前面没留空格，就算逻辑跑通也会显示成Welcomebackxxx的错误格式
• 按钮点击后直接触发页面跳转，很可能弹窗还没渲染完成就跳走了
• 输入框的默认值清空逻辑有漏洞，用户如果没手动输入直接点提交，会把"Enter username"当成有效用户名存储
• 你用username+n累加key的存储方式完全没必要，需求只需要判断当前输入的用户名有没有登录记录，不需要遍历存所有序号的key。

JS部分 #

替换你原来的JS代码即可：

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

function welcomeUsername(){
  const currentUser = myText.value.trim();
  // 空输入拦截
  if (!currentUser || currentUser === "Enter username") {
    alert("请输入有效用户名");
    return;
  }

  let tipText;
  // 直接判断当前用户名是否有存储记录，不需要无效循环
  const hasLoginRecord = localStorage.getItem(`loginRecord_${currentUser}`);
  if (hasLoginRecord) {
    tipText = `Welcome back ${currentUser}!`;
  } else {
    tipText = `Welcome ${currentUser}!`;
    // 首次登录写入存储记录
    localStorage.setItem(`loginRecord_${currentUser}`, "1");
  }

  alert(tipText);
  // 弹窗弹出后再执行跳转，避免提前跳走看不到提示
  location.href = '/index';
}

HTML部分调整 #

把原来的提交按钮代码替换成下面的，去掉内联的直接跳转逻辑：

<input type="button"  onClick="welcomeUsername();" value = "Submit" id = "myButton">

输入框的onfocus逻辑可以保留，也可以直接删掉，JS里已经加了默认值的拦截判断，不会把默认提示当用户名存。

如果你确实需要保留按序号存储所有登录用户名的逻辑，只需要把循环判断条件从错误的while(n)改成while(localStorage.getItem("username" + n))即可，不过这种实现方式效率很低，每次判断都要从n=0开始遍历所有存储项，远不如直接用用户名作为key判断是否存在的方案简洁。

内容的提问来源于stack exchange，提问作者dam's