基于输入值用纯Vanilla JavaScript创建可登录新访客用户求助

嘿，我来帮你搞定这个纯Vanilla JavaScript的用户添加和登录功能！既然是个人本地项目，咱们用localStorage来存用户数据就够了，不用后端数据库，纯前端就能实现持久化，刷新页面数据也不会丢，完美适配你的需求。

核心思路 #

首先初始化默认的admin和guest用户到本地存储，然后做一个表单用于输入新访客的用户名和密码，提交后将新用户追加到存储中，最后编写登录验证逻辑，确保新用户能正常登录。

完整代码实现 #

HTML部分（页面结构） #

<!-- 新增用户表单 -->
<div style="margin: 20px;">
  <h3>添加新访客用户</h3>
  <input type="text" id="newUsername" placeholder="请输入新用户名" required style="margin: 5px; padding: 8px;">
  <input type="password" id="newPassword" placeholder="请输入新密码" required style="margin: 5px; padding: 8px;">
  <button id="addUserBtn" style="padding: 8px 15px; cursor: pointer;">添加用户</button>
</div>

<!-- 登录表单 -->
<div style="margin: 20px;">
  <h3>用户登录</h3>
  <input type="text" id="loginUsername" placeholder="用户名" required style="margin: 5px; padding: 8px;">
  <input type="password" id="loginPassword" placeholder="密码" required style="margin: 5px; padding: 8px;">
  <button id="loginBtn" style="padding: 8px 15px; cursor: pointer;">登录</button>
  <p id="loginTip" style="margin-top: 10px;"></p>
</div>

JavaScript部分（功能逻辑） #

// 初始化默认用户：如果本地存储没有用户数据，就添加admin和guest
function initDefaultUsers() {
  if (!localStorage.getItem('systemUsers')) {
    const defaultUsers = [
      { username: 'admin', password: 'admin123', role: 'admin' },
      { username: 'guest', password: 'guest123', role: 'guest' }
    ];
    localStorage.setItem('systemUsers', JSON.stringify(defaultUsers));
  }
}

// 添加新访客用户的函数
function addGuestUser() {
  const newUsername = document.getElementById('newUsername').value.trim();
  const newPassword = document.getElementById('newPassword').value.trim();

  // 简单校验：不能为空、用户名不能重复
  if (!newUsername || !newPassword) {
    alert('用户名和密码不能为空哦！');
    return;
  }

  const allUsers = JSON.parse(localStorage.getItem('systemUsers'));
  const isUsernameTaken = allUsers.some(user => user.username === newUsername);
  if (isUsernameTaken) {
    alert('这个用户名已经被使用啦，请换一个！');
    return;
  }

  // 添加新访客（角色设为guest）
  allUsers.push({ username: newUsername, password: newPassword, role: 'guest' });
  localStorage.setItem('systemUsers', JSON.stringify(allUsers));
  
  alert('新访客用户添加成功！');
  // 清空表单
  document.getElementById('newUsername').value = '';
  document.getElementById('newPassword').value = '';
}

// 登录验证函数
function handleLogin() {
  const loginName = document.getElementById('loginUsername').value.trim();
  const loginPwd = document.getElementById('loginPassword').value.trim();
  const loginTip = document.getElementById('loginTip');

  const allUsers = JSON.parse(localStorage.getItem('systemUsers'));
  const matchedUser = allUsers.find(user => user.username === loginName && user.password === loginPwd);

  if (matchedUser) {
    loginTip.textContent = `登录成功！欢迎你，${matchedUser.username}（角色：${matchedUser.role}）`;
    loginTip.style.color = 'green';
    // 这里可以扩展登录后的逻辑，比如跳转页面、展示用户信息等
  } else {
    loginTip.textContent = '用户名或密码错误，请重试！';
    loginTip.style.color = 'red';
  }
}

// 页面加载完成后初始化并绑定事件
window.addEventListener('DOMContentLoaded', () => {
  initDefaultUsers();
  
  document.getElementById('addUserBtn').addEventListener('click', addGuestUser);
  document.getElementById('loginBtn').addEventListener('click', handleLogin);
});

关键细节说明 #

• 用localStorage存储用户数据，关闭浏览器再打开也能保留数据，适合本地测试项目
• 新增用户时做了基础校验，避免空值和重复用户名
• 新用户默认设置为guest角色，和你现有的访客用户权限一致
• 登录逻辑会严格匹配用户名和密码，并返回对应的用户角色

测试步骤 #

1. 打开页面，首次加载会自动创建admin和guest两个默认用户
2. 在新增用户表单输入新的用户名和密码，点击「添加用户」，成功后会弹出提示
3. 用刚添加的用户名和密码在登录表单登录，就能看到登录成功的反馈啦

内容的提问来源于stack exchange，提问作者Moreover1