使用JS、CSS、H5实现简单的登录弹窗，可保存用户信息

好的，我可以为您提供一个简单的实现方式，使用HTML5的本地存储功能来保存用户信息。

首先，您需要在HTML文档中添加一个按钮，当用户点击该按钮时，会弹出登录窗口。如下所示：

<button onclick="showLogin()">登录</button>

接下来，您可以编写一个JavaScript函数 `showLogin()` 来显示登录窗口。在这个函数中，您可以使用CSS样式来美化登录窗口的外观，同时也可以创建表单元素来让用户输入用户名和密码。如下所示：

<!-- HTML 代码 -->
<div id="login-modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>登录</h2>
    <form>
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" required>
      <br>
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required>
      <br>
      <button type="submit">登录</button>
    </form>
  </div>
</div>

<style>
/* CSS 代码 */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
}

button[type="submit"]:hover {
  background-color: #45a049;
}
</style>

<script>
// JavaScript 代码
function showLogin() {
  const modal = document.getElementById("login-modal");
  const closeBtn = document.getElementsByClassName("close")[0];

  // 显示登录窗口
  modal.style.display = "block";

  // 点击关闭按钮或窗口外区域，关闭登录窗口
  closeBtn.onclick = function() {
    modal.style.display = "none";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  // 提交表单时保存用户信息
  const form = document.getElementsByTagName("form")[0];
  form.addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单提交
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;
    localStorage.setItem("username", username);
    localStorage.setItem("password", password);
    modal.style.display = "none";
  });
}
</script>

在上面的代码中，我们创建了一个 `div` 元素来作为登录窗口的容器，并将其隐藏。当用户点击登录按钮时，我们使用 JavaScript 来显示这个窗口，并为关闭按钮和窗口外区域添加了关闭事件处理程序。同时，我们使用 HTML5 的表单元素来让用户输入用户名和密码，并在表单提交时使用 `localStorage` 来保存用户信息。

在您需要获取用户信息的地方，您可以使用以下代码来获取保存在本地存储中的用户名和密码：

const username = localStorage.getItem("username");
const password = localStorage.getItem("password");

请注意，由于本地存储仅在同一域名下工作，因此您需要在同一域名下的页面中才能访问保存在本地存储中的数据。此外，由于本地存储是基于浏览器的，因此用户可以随时清除它们的本地存储，因此您应该在使用这些数据之前检查它们是否存在。