js cookie实现记住密码功能-前端开发

下面是关于“js cookie实现记住密码功能”的完整攻略。

下面是关于“js cookie实现记住密码功能”的完整攻略。

什么是cookie

Cookie 是一种小的文本数据，它通常由一个网站的服务器发送到网站的浏览器之后就被存储在浏览器的本地硬盘上。每当该浏览器向同一网站再次发出请求时，它就会将这些 Cookie 信息发送给该网站的服务器。

如何使用js cookie实现记住密码功能

一般情况下，我们可以通过设置一个 checkbox 来控制是否记住密码，具体实现流程如下：

通过 document.querySelector() 方法获取到 checkbox 元素及所对应的 input 元素。

const rememberCheckbox = document.querySelector('#remember-checkbox');
const passwordInput = document.querySelector('#password-input');

在 login 事件中，判断 checkbox 是否被选中，如果选中则保存密码到 cookie 中。

document.querySelector('#login-btn').addEventListener('click', () => {
  // 获取账号密码
  const username = document.querySelector('#username-input').value;
  const password = passwordInput.value;
  // 判断是否勾选记住密码
  if (rememberCheckbox.checked) {
    // 将密码保存到 cookie 中
    Cookies.set('password', password, { expires: 7 });
  } else {
    // 清空之前保存的密码
    Cookies.remove('password');
  }
  // 其他登录逻辑
});

在输入密码的 input 元素中判断是否存在保存的密码，如果存在则自动填充密码。

document.addEventListener('DOMContentLoaded', () => {
  // 判断是否存在保存的密码
  const password = Cookies.get('password');
  if (password) {
    // 填充之前保存的密码
    passwordInput.value = password;
    rememberCheckbox.checked = true;
  }
});

示例说明

示例1：简单的登录页面实现记住密码功能

假设我们有一个简单的登录页面，如下：

<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
  <meta charset="UTF-8">
</head>
<body>
  <form>
    <div>
      <label for="username-input">用户名：</label>
      <input type="text" id="username-input" required>
    </div>
    <div>
      <label for="password-input">密码：</label>
      <input type="password" id="password-input" required>
      <label><input type="checkbox" id="remember-checkbox">下次自动登录</label>
    </div>
    <button type="button" id="login-btn">登录</button>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
  <script>
    const rememberCheckbox = document.querySelector('#remember-checkbox');
    const passwordInput = document.querySelector('#password-input');

    document.querySelector('#login-btn').addEventListener('click', () => {
      // 获取账号密码
      const username = document.querySelector('#username-input').value;
      const password = passwordInput.value;
      // 判断是否勾选记住密码
      if (rememberCheckbox.checked) {
        // 将密码保存到 cookie 中
        Cookies.set('password', password, { expires: 7 });
      } else {
        // 清空之前保存的密码
        Cookies.remove('password');
      }
      // 其他登录逻辑
    });

    document.addEventListener('DOMContentLoaded', () => {
      // 判断是否存在保存的密码
      const password = Cookies.get('password');
      if (password) {
        // 填充之前保存的密码
        passwordInput.value = password;
        rememberCheckbox.checked = true;
      }
    });
  </script>
</body>
</html>

我们在登录页面中添加了一个 checkbox 和一个对应的 input 来实现记住密码功能。

示例2：使用Bootstrap框架实现记住密码功能

假设我们使用 Bootstrap 框架来实现一个简单的登录页面，实现代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
  <meta charset="UTF-8">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-5">
    <form>
      <div class="mb-3">
        <label for="username-input" class="form-label">用户名：</label>
        <input type="text" class="form-control" id="username-input" required>
      </div>
      <div class="mb-3">
        <label for="password-input" class="form-label">密码：</label>
        <input type="password" class="form-control" id="password-input" required>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="remember-checkbox">
          <label class="form-check-label" for="remember-checkbox">
            下次自动登录
          </label>
        </div>
      </div>
      <button type="button" class="btn btn-primary" id="login-btn">登录</button>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
  <script>
    const rememberCheckbox = document.querySelector('#remember-checkbox');
    const passwordInput = document.querySelector('#password-input');

    document.querySelector('#login-btn').addEventListener('click', () => {
      // 获取账号密码
      const username = document.querySelector('#username-input').value;
      const password = passwordInput.value;
      // 判断是否勾选记住密码
      if (rememberCheckbox.checked) {
        // 将密码保存到 cookie 中
        Cookies.set('password', password, { expires: 7 });
      } else {
        // 清空之前保存的密码
        Cookies.remove('password');
      }
      // 其他登录逻辑
    });

    document.addEventListener('DOMContentLoaded', () => {
      // 判断是否存在保存的密码
      const password = Cookies.get('password');
      if (password) {
        // 填充之前保存的密码
        passwordInput.value = password;
        rememberCheckbox.checked = true;
      }
    });
  </script>
</body>
</html>

我们在 Bootstrap 框架中添加了一个 checkbox 和一个对应的 input 来实现记住密码功能，使用起来相对于纯手写页面更加方便，同时也符合更加美观的界面风格。