JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

下面是详细讲解：

本地存储(Local Storage)是一种非常有用的Web技术，可以将数据存储在用户的浏览器中。HTML5标准引入了Web Storage API，Local Storage就是其中一种常用的存储方式。在这里，我们将结合JavaScript和HTML5本地存储(Local Storage)实现一个简单的注册登录及验证功能示例。该示例可以帮助初学者理解Local Storage的应用。

第一步：创建HTML页面及CSS样式表

首先，我们需要创建以下HTML标签及CSS样式表。HTML标签包含一个表单(包含三个输入框)和按钮(注册/登录)，CSS样式表用于美化页面。

<!DOCTYPE html>
<html>
  <head>
    <title>Local Storage 示例</title>
    <style>
    /* 定义样式 */
      form {
          margin: 10px;
      }
      input[type=text], input[type=password] {
          width: 100%;
          padding: 10px 20px;
          margin: 8px 0;
          box-sizing: border-box; /* 让padding和border包含在元素内 */
          border: 2px solid #ccc;
          border-radius: 4px; /* 圆角 */
          background-color: #f8f8f8;
      }
      button {
          background-color: #4CAF50;
          color: white;
          padding: 14px 20px; 
          margin: 8px 0;
          border: none;
          border-radius: 4px;
          cursor: pointer;
      }
      button:hover {
          background-color: #45a049;
      }

    </style>
  </head>
  <body>
    <h2>Registration & Login Example</h2>
    <form id="form" method="POST">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" placeholder="Enter username" required>

      <label for="password">Password</label>
      <input type="password" id="password" name="password" placeholder="Enter password" required>

      <label for="confirm">Confirm Password</label>
      <input type="password" id="confirm" name="confirm" placeholder="Confirm password" required>

      <button type="button" onclick="submitForm()">Register / Login</button>
    </form>
    <div id="message"></div>
    <script src="localStorage.js"></script>
  </body>
</html>

第二步：编写JavaScript脚本保存用户注册信息

接下来，我们需要编写JavaScript脚本，以便将用户的注册信息保存在本地存储中。如果用户选择“注册”按钮，我们将验证所有输入是否有效，并将用户名和密码保存在本地存储中。本地存储使用键值对的方式来储存数据，我们将用户名作为键，密码作为值，这样我们便可以通过用户名来获取用户的密码。

以下是保存用户信息的JavaScript示例代码：

function submitForm() {
  // 获取输入框中的内容
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var confirm = document.getElementById("confirm").value;

  // 验证输入是否有效
  if(username.trim() == '' || password.trim() == '' || confirm.trim() == '') {
    document.getElementById("message").innerHTML = "所有输入框均为必填项。";
    return;
  }
  if(password != confirm) {
    document.getElementById("message").innerHTML = "密码不匹配。";
    return;
  }

  // 将数据存储在本地存储中
  localStorage.setItem(username, password);
  document.getElementById("message").innerHTML = "用户 " + username + " 注册成功。";
}

以上代码的作用：

获取文本框输入的值，验证其有效性，例如“所有输入框均为必填项，密码不匹配”。
将用户名和密码作为键值对存储在本地存储(Local Storage)中。
将用户注册成功的提示信息显示在页面上。

第三步：编写JavaScript脚本验证用户身份

最后，我们需要编写JavaScript脚本，以便验证用户是否已经注册，并且其密码是否正确。如果用户名和密码都存在于本地存储(Local Storage)，我们将显示一个“登陆成功”的消息，否则将显示“用户名或密码错误”的错误消息。以下是示例代码：

function submitForm() {
  // 获取输入框中的内容
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var confirm = document.getElementById("confirm").value;

  // 验证输入是否有效
  if(username.trim() == '' || password.trim() == '' || confirm.trim() == '') {
    document.getElementById("message").innerHTML = "所有输入框均为必填项。";
    return;
  }
  if(password != confirm) {
    document.getElementById("message").innerHTML = "密码不匹配。";
    return;
  }

  // 将数据存储在本地存储中
  localStorage.setItem(username, password);
  document.getElementById("message").innerHTML = "用户 " + username + " 注册成功。";
}

以上代码的作用：