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

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

• JavaScript
yizhihongxing

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日

相关文章

  • 可视化埋点平台元素曝光采集intersectionObserver思路实践

    下面是“可视化埋点平台元素曝光采集intersectionObserver思路实践”的完整攻略： 1. 背景介绍 在网站开发中，我们需要对用户行为进行数据采集和分析，从而改善用户体验并优化网站内容。埋点采集是一种常见的数据采集方式，其主要通过在网站代码中插入特定的埋点代码，捕获用户在网站中的各种操作行为。其中，元素的曝光采集是一个非常有意义的场景，可以记录某…

    JavaScript 2023年6月11日
    00

  • javascript实现的简易的DatePicker日历

    下面是javascript实现的简易DatePicker日历的完整攻略： 1. 前言 DatePicker（日期选择器）在web应用中是一个非常常见的功能，它可以方便用户选择指定日期，并以统一的格式显示。本文将介绍如何使用javascript实现一款简易的DatePicker。 2. 实现思路 在实现DatePicker时，我们需要做以下几个步骤： 创建一个…

    JavaScript 2023年5月27日
    00

  • js是什么文件格式？.js文件怎么打开？

    JS是JavaScript的缩写，是一种脚本语言，广泛用于Web页面的设计，行为与HTML相互作用，并且可以被各种不同的网页浏览器支持。 对于.js文件，它是JavaScript代码文件的文件扩展名，在开发过程中非常常见。通常，我们需要打开.js文件来编辑、查看或修改其中的代码内容。下面是打开.js文件的几种方法： 方法一：使用文本编辑器 我们可以通过文本编…

    JavaScript 2023年5月27日
    00

  • JS判断指定dom元素是否在屏幕内的方法实例

    JS判断指定dom元素是否在屏幕内的方法实例可以通过以下步骤来完成： 1. 获取屏幕高度和滚动距离 使用window.innerHeight属性获取屏幕高度，使用window.scrollY属性获取页面滚动的距离，代码如下： const screenHeight = window.innerHeight; const scrollDistance = win…

    JavaScript 2023年6月10日
    00

  • jQuery实现动画效果的简单实例

    下面我将详细讲解“jQuery实现动画效果的简单实例”的完整攻略。 前言 在现代web开发中，我们经常需要制作各种动画效果来增加用户体验，利用jQuery来实现动画效果可以帮助开发人员大大降低实现的难度和代码量。在这篇攻略中，我们将通过两个简单的例子来演示如何使用jQuery来实现动画效果。 实例1：淡入淡出效果 下面是一个简单的jQuery实现淡入淡出效果…

    JavaScript 2023年6月10日
    00

  • js replace(a,b)之替换字符串中所有指定字符的方法

    关于 JavaScript 中字符串替换方法 replace(a, b) 的使用，我来给你详细讲解一下。 基本语法 replace() 方法用于替换字符串中的指定值。该方法可以接收两个参数： 要替换的字符串 替换后的字符串 语法如下： string.replace(searchValue, replaceValue) 其中，searchValue 是要替换的…

    JavaScript 2023年5月28日
    00

  • 如何将一个String和多个String值进行比较思路分析

    当我们需要将一个 String 和多个 String 值进行比较时，可以采用以下步骤： 遍历所有的 String 值，对每个值进行比较 使用 equals() 方法判断当前值是否等于目标 String 如果等于，表示匹配成功，执行相应的操作；如果不等于，继续比较其他值 示例1： 假设我们需要判断用户输入的颜色值是否为预设的几种颜色之一，预设的颜色有红、绿、蓝…

    JavaScript 2023年6月10日
    00

  • JS保存、读取、换行、转Json报错处理方法

    下面是JS保存、读取、换行、转Json报错处理方法的完整攻略。 JS保存 在 JavaScript 中，可以使用 JSON.stringify 方法将 JavaScript 中的对象序列化成一个 JSON 字符串，然后将该字符串保存到本地。 const obj = { name: ‘小明’, age: 18, hobby: [‘篮球’, ‘游泳’] }; /…

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