如何通过Admin按钮在网站中打印登录及注册用户信息

针对你的需求，我们可以用前端的localStorage来持久化存储用户信息，配合JavaScript完成登录/注册时的信息存储，以及Admin按钮触发的表格展示功能。下面是完整的实现方案：

1. 核心思路 #

• 用localStorage存储用户数据，它能在浏览器中持久保存信息，刷新页面后不会丢失
• 注册时校验用户是否已存在，登录时校验账号密码，同时记录注册时间、最后登录时间等必要信息
• 点击Admin按钮时，从localStorage读取所有用户数据，动态生成HTML表格并展示

2. 完整代码实现 #

HTML结构 #

<!-- 登录/注册表单 -->
<div class="auth-container">
  <h2>登录</h2>
  <form id="loginForm">
    <input type="email" id="loginEmail" placeholder="邮箱" required>
    <input type="password" id="loginPassword" placeholder="密码" required>
    <button type="submit">登录</button>
  </form>

  <h2>注册</h2>
  <form id="registerForm">
    <input type="text" id="registerName" placeholder="用户名" required>
    <input type="email" id="registerEmail" placeholder="邮箱" required>
    <input type="password" id="registerPassword" placeholder="密码" required>
    <button type="submit">注册</button>
  </form>
</div>

<!-- Admin按钮 -->
<button id="adminBtn">Admin查看用户</button>

<!-- 用户信息表格容器 -->
<div id="userTableContainer" style="display: none; margin-top: 20px;">
  <h3>所有用户信息</h3>
  <table border="1">
    <thead>
      <tr>
        <th>用户名</th>
        <th>邮箱</th>
        <th>注册时间</th>
        <th>最后登录时间</th>
      </tr>
    </thead>
    <tbody id="userTableBody"></tbody>
  </table>
</div>

CSS样式（基础美化） #

.auth-container {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

button {
  padding: 8px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
}

button:hover {
  background-color: #0056b3;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

JavaScript逻辑 #

// 初始化用户数据，若localStorage中没有则创建空数组
let users = JSON.parse(localStorage.getItem('users')) || [];

// 注册表单提交处理
document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const name = document.getElementById('registerName').value;
  const email = document.getElementById('registerEmail').value;
  const password = document.getElementById('registerPassword').value;
  
  // 检查用户是否已存在
  const existingUser = users.find(user => user.email === email);
  if (existingUser) {
    alert('该邮箱已注册！');
    return;
  }
  
  // 创建新用户对象，包含注册时间
  const newUser = {
    name: name,
    email: email,
    password: password, // 注意：实际项目中密码要加密存储，这里为了演示直接存明文
    registerTime: new Date().toLocaleString(),
    lastLoginTime: null
  };
  
  // 添加到用户数组并保存到localStorage
  users.push(newUser);
  localStorage.setItem('users', JSON.stringify(users));
  
  alert('注册成功！');
  this.reset();
});

// 登录表单提交处理
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const email = document.getElementById('loginEmail').value;
  const password = document.getElementById('loginPassword').value;
  
  // 查找用户并验证密码
  const user = users.find(user => user.email === email && user.password === password);
  if (!user) {
    alert('邮箱或密码错误！');
    return;
  }
  
  // 更新最后登录时间
  user.lastLoginTime = new Date().toLocaleString();
  localStorage.setItem('users', JSON.stringify(users));
  
  alert('登录成功！');
  this.reset();
});

// Admin按钮点击处理，展示用户表格
document.getElementById('adminBtn').addEventListener('click', function() {
  const tableBody = document.getElementById('userTableBody');
  const container = document.getElementById('userTableContainer');
  
  // 清空表格内容
  tableBody.innerHTML = '';
  
  // 遍历用户数据，生成表格行
  users.forEach(user => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${user.name}</td>
      <td>${user.email}</td>
      <td>${user.registerTime}</td>
      <td>${user.lastLoginTime || '未登录过'}</td>
    `;
    tableBody.appendChild(row);
  });
  
  // 显示表格容器
  container.style.display = 'block';
});

3. 关键说明 #

• 存储安全性：示例中密码是明文存储，实际开发中必须用加密算法（比如bcrypt）处理后再存储，这里只是为了简化演示
• localStorage限制：它存储在用户浏览器中，容量有限（约5MB），且容易被篡改，适合学习阶段使用，正式项目需要配合后端数据库
• 表格动态生成：通过JavaScript创建DOM元素，把用户数据插入到表格中，点击Admin按钮时更新内容并显示容器

内容的提问来源于stack exchange，提问作者Venkata kishore N