沃梦达 / 编程技术 / 前端开发 / 正文

js实现登录时记住密码的方法分析

前端开发
2024-04-16

在许多网站的登录页面中，都提供了“记住密码”的功能，用户在勾选该选项后，下次登录时可以自动填充用户名和密码，方便了用户的登录操作。本文将介绍如何使用js实现这一功能，涉及到cookie和localStorage两种方法。

js实现登录时记住密码的方法分析

在许多网站的登录页面中，都提供了“记住密码”的功能，用户在勾选该选项后，下次登录时可以自动填充用户名和密码，方便了用户的登录操作。本文将介绍如何使用js实现这一功能，涉及到cookie和localStorage两种方法。

1. 使用cookie实现记住密码功能

1.1 设置cookie

在用户登录成功后，可以使用js将用户名和密码以cookie的形式保存在浏览器中，代码如下：

function rememberMe(username, password) {
  let expires = new Date();
  // 设置cookie的过期时间为7天后
  expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000);
  // 将用户名和密码使用分号隔开，拼接成一个字符串
  let loginInfo = `${username};${password}`;
  // 将字符串保存到cookie中
  document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`;
}
  • expires 是设置 cookie 的过期时间，通过 setTime() 方法设置为当前时间 + 7 天后的时间；
  • loginInfo 是将用户名和密码使用分号隔开拼接成的字符串，便于在下次登录时解析；
  • document.cookie 是将字符串保存到 cookie 中，其中 expires 是通过 toGMTString() 方法将过期时间转化为 GMT 格式；

1.2 获取cookie

在下次访问登录页面时，可以使用js从浏览器中获取保存的用户名和密码，代码如下：

function getLoginInfo() {
  let cookie = document.cookie;
  let cookies = cookie.split("; ");
  let loginInfo = "";
  for (let i = 0; i < cookies.length; i++) {
    let arr = cookies[i].split("=");
    if (arr[0] === "loginInfo") {
      loginInfo = arr[1];
      break;
    }
  }
  if (loginInfo !== "") {
    let userInfo = loginInfo.split(";");
    // 返回用户名和密码组成的对象
    return { username: userInfo[0], password: userInfo[1] };
  } else {
    return null;
  }
}
  • document.cookie 是从浏览器中获取保存的cookie；
  • cookie.split("; ") 是将cookie字符串按照分号空格分割成数组；
  • loginInfo 是用来保存当前登录用户的用户名和密码；
  • userInfo 是将用户名和密码从字符串中分离出来，组成一个包含两个属性的对象；

1.3 示例说明

下面以一个简单的登录页面为例，演示如何使用cookie实现记住密码功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
</head>
<body>
  <form action="login.php" method="post">
    <input type="text" name="username" placeholder="请输入用户名"><br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="checkbox" name="remember" value="1">记住密码<br>
    <input type="submit" value="登录">
  </form>
  <script>
    window.onload = function() {
      let loginInfo = getLoginInfo();
      if (loginInfo !== null) {
        let usernameInput = document.getElementsByName("username")[0];
        let passwordInput = document.getElementsByName("password")[0];
        let rememberInput = document.getElementsByName("remember")[0];
        usernameInput.value = loginInfo.username;
        passwordInput.value = loginInfo.password;
        rememberInput.checked = true;
      }
    }

    function rememberMe(username, password) {
      let expires = new Date();
      expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000);
      let loginInfo = `${username};${password}`;
      document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`;
    }

    function getLoginInfo() {
      let cookie = document.cookie;
      let cookies = cookie.split("; ");
      let loginInfo = "";
      for (let i = 0; i < cookies.length; i++) {
        let arr = cookies[i].split("=");
        if (arr[0] === "loginInfo") {
          loginInfo = arr[1];
          break;
        }
      }
      if (loginInfo !== "") {
        let userInfo = loginInfo.split(";");
        return { username: userInfo[0], password: userInfo[1] };
      } else {
        return null;
      }
    }

    let form = document.getElementsByTagName("form")[0];
    form.onsubmit = function(event) {
      let usernameInput = document.getElementsByName("username")[0];
      let passwordInput = document.getElementsByName("password")[0];
      let rememberInput = document.getElementsByName("remember")[0];
      if (rememberInput.checked) {
        rememberMe(usernameInput.value, passwordInput.value);
      } else {
        let expires = new Date(0);
        document.cookie = `loginInfo=;expires=${expires.toGMTString()}`;
      }
    }  
  </script>
</body>
</html>

该页面包含了一个form表单，其中有用户名、密码和“记住密码”的复选框。在表单提交时，会根据复选框的状态使用rememberMe()函数设置或清除cookie，用户下一次打开页面时，用户名和密码会自动填充，同时复选框也会被选上。使用getLoginInfo()函数从cookie中获取用户名和密码，然后将用户名和密码填入表单中即可。

2. 使用localStorage实现记住密码功能

2.1 设置localStorage

除了使用cookie之外，localStorage也是保存数据的一种常用方式。localStorage和cookie的不同之处在于，localStorage保存的数据不会随着浏览器请求发送到服务器端，因此更加安全。那么如何使用localStorage保存用户名和密码呢？代码如下：

function rememberMe(username, password) {
  let userinfo = {username: username, password: password};
  // 将用户信息转换为JSON格式
  let userinfo_str = JSON.stringify(userinfo);
  // 将JSON字符串保存到localStorage中
  localStorage.setItem('userinfo', userinfo_str);
}
  • 我们将用户名和密码作为一个对象，通过 JSON.stringify() 方法将其转换为字符串；
  • 使用 localStorage.setItem() 方法将字符串保存到localStorage中，key的值为“userinfo”；

2.2 获取localStorage

在用户下次访问登录页面时，可以使用js从localStorage中获取保存的用户名和密码，代码如下：

function getLoginInfoFromStorage() {
  // 从localStorage中获取保存的用户信息
  let userinfo_str = localStorage.getItem("userinfo");
  if (userinfo_str) {
    // 将JSON字符串转换为对象
    let userinfo = JSON.parse(userinfo_str);
    // 返回用户名和密码组成的对象
    return { username: userinfo.username, password: userinfo.password };
  }
  return null;
}
  • 使用 localStorage.getItem() 方法从localStorage中获取保存的用户信息；
  • 如果有保存的信息，则使用 JSON.parse() 方法将字符串转换为对象；
  • 将用户名和密码返回；

2.3 示例说明

下面以一个示例页面为例，演示如何使用localStorage实现记住密码功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
</head>
<body>
  <form action="login.php" method="post">
    <input type="text" name="username" placeholder="请输入用户名"><br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="checkbox" name="remember" value="1">记住密码<br>
    <input type="submit" value="登录">
  </form>

  <script>
    window.onload = function() {
      let loginInfo = getLoginInfoFromStorage();
      if (loginInfo !== null) {
        let usernameInput = document.getElementsByName("username")[0];
        let passwordInput = document.getElementsByName("password")[0];
        let rememberInput = document.getElementsByName("remember")[0];
        usernameInput.value = loginInfo.username;
        passwordInput.value = loginInfo.password;
        rememberInput.checked = true;
      }
    }

    function rememberMe(username, password) {
      let userinfo = {username: username, password: password};
      let userinfo_str = JSON.stringify(userinfo);
      localStorage.setItem('userinfo', userinfo_str);
    }

    function getLoginInfoFromStorage() {
      let userinfo_str = localStorage.getItem("userinfo");
      if (userinfo_str) {
        let userinfo = JSON.parse(userinfo_str);
        return { username: userinfo.username, password: userinfo.password };
      }
      return null;
    }

    let form = document.getElementsByTagName("form")[0];
    form.onsubmit = function(event) {
      let usernameInput = document.getElementsByName("username")[0];
      let passwordInput = document.getElementsByName("password")[0];
      let rememberInput = document.getElementsByName("remember")[0];
      if (rememberInput.checked) {
        rememberMe(usernameInput.value, passwordInput.value);
      } else {
        localStorage.removeItem("userinfo");
      }
    } 
  </script>
</body>
</html>

该页面与之前的例子类似，但现在我们使用localStorage保存用户信息。使用 localStorage.getItem() 方法从localStorage中获取保存的信息。可以通过 JSON.parse() 方法将字符串转化为对象，然后将用户名和密码填入表单中即可。在表单提交时同样使用记住密码和清除信息两种操作。

本文标题为：js实现登录时记住密码的方法分析

上一篇： jQuery基于cookie实现换肤功能实例
下一篇： chrome监听cookie变化与赋值问题

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2