1. Python技术站首页
  2. 其他
  3. JavaScript

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

• JavaScript

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实现登录时记住密码的方法分析 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript 和 Java 的区别浅析

    JavaScript 和 Java 的区别浅析 基本概念 JavaScript 是一门脚本语言，主要用于前端交互式的网页开发，而 Java 是一门面向对象的编程语言，常用于后端开发和 Android 应用开发。 语言类型 JavaScript 是一种解释型的语言，因为它的代码无需编译，直接在浏览器中解释执行；而 Java 是一种编译型的语言，需要通过编译器将…

    JavaScript 2023年5月18日
    00

  • JS获取当前时间的实例代码(昨天、今天、明天)

    获取当前时间是JavaScript中比较基础的内容，可以通过Date对象的方法获取到当前的时间、日期等信息。对于“昨天、今天、明天”的需求，可以在获取当前时间的基础上，通过一些计算方法实现。 以下是获取当前时间及计算“昨天、今天、明天”的示例代码： 获取当前时间的实例代码 const now = new Date(); // 创建一个Date对象，获取当前时…

    JavaScript 2023年5月27日
    00

  • JavaScript字符串包含问题

    JavaScript字符串包含问题是指在一个字符串中，查找是否包含另一个字符串的问题。通常使用indexOf()或includes()方法来解决该问题。 使用indexOf()方法 indexOf()方法返回字符串中指定字符或字符串第一次出现的位置。返回值为-1表示未找到。可以通过以下方式使用它来判断一个字符串是否包含另一个字符串： let str = ‘h…

    JavaScript 2023年5月28日
    00

  • Javascript Math random() 方法

    JavaScript中的Math.random()方法是用于生成一个0到1之间的随机数的函数。以下是关于Math.random()方法的完整攻略，包含两个示例。 JavaScript Math对象的random方法 JavaScript Math的random()方法用于生成一个0到1之间的随机数。下面是random()方法的语法： Math.random(…

    JavaScript 2023年5月11日
    00

  • 理解javascript函数式编程中的闭包（closure）

    理解 javascript 函数式编程中的闭包（closure）可以分为以下几个步骤： 什么是闭包？ 闭包是指一个函数访问了自己定义的外部函数的作用域中的变量。简单来说，就是在一个函数内部可以访问另一个函数作用域中的变量。在 JavaScript 中，当一个函数定义在另一个函数内部时，就会形成一个闭包。 闭包的使用 保存私有变量 闭包可以用来定义私有变量。这…

    JavaScript 2023年6月10日
    00

  • 深入理解JavaScript系列（19）：求值策略(Evaluation strategy)详解

    当JavaScript引擎要执行一段代码时，它会将代码中的表达式转换成值，这个转换的过程被称为求值。在求值的过程中，JavaScript引擎采用了不同的求值策略。本文将详细介绍JavaScript中的求值策略及其相关的知识点。 一、JavaScript中的表达式 在JavaScript中，表达式是由运算符和操作数组成的。表达式主要分为以下几类： 原始表达式：…

    JavaScript 2023年5月28日
    00

  • javascript unicode与GBK2312(中文)编码转换方法

    下面是详细讲解“javascript unicode与GBK2312(中文)编码转换方法”的完整攻略。 了解Unicode与GBK2312编码 在进行编码转换前，我们需要先了解所涉及的两种编码方式：Unicode和GBK2312。 Unicode是国际标准化组织制定的国际编码标准，它为世界上所有的字符规定了统一的编码，包括字母、数字、标点符号、各国文字等。U…

    JavaScript 2023年5月20日
    00

  • javascript写的一个表单动态输入提示的代码

    要实现JavaScript写的一个表单动态输入提示，我们需要使用以下步骤： HTML页面中创建表单输入框及提示框的DOM节点； 监听表单输入框的keyup事件，获取输入框中输入的内容； 根据输入的内容动态生成提示框中的内容； 实现鼠标移动到提示框中的选项可以高亮并填充到输入框中； 实现键盘上下键可以在提示框中切换选项并填充到输入框中； 实现鼠标点击或回车键可…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部