javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js记住密码功能

使用JavaScript实现记住密码功能详细代码示例

作者：TOYG

这篇文章主要给大家介绍了关于使用JavaScript实现记住密码功能的相关资料,文中通过示例讲解了使用Cookie和LocalStorage实现登录记住密码功能的两种方法,需要的朋友可以参考下

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

1.1 设置cookie

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

//定义函数，记住密码
function rememberMe(uname, upass) {
  let expires = new Date();
  // 设置cookie的过期时间为7天后
  expires.setDate(expires.getDate() + 7);
  // 将用户名和密码使用冒号:隔开，拼接成一个字符串
  let loginInfo = `${uname}:${upass}`;
  // 将字符串保存到cookie中
  document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`;
}

●expires 是设置 cookie 的过期时间，通过 setDate 方法设置为当前日期 + 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 ck of cookies) {
    let name = ck.split("=")[0];
    if (name == 'loginInfo') {
      loginInfo = ck.split("=")[1]
      break;
    }
  }
  if (loginInfo !== "") {
    // admin:123
    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>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="xxx" 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>
        //1.获取表单
        var form = document.querySelector("form");
        var username = document.querySelector("input[name='username']");
        var password = document.querySelector("input[name='password']");
        var remember = document.querySelector("input[name='remember']");
        //2.为表单绑定提交事件
        form.onsubmit = function (event) {
            if (remember.checked) {
                //需要记住密码
                rememberMe(username.value, password.value);
            } else {
                //不记住密码
                let expires = new Date(0);
                document.cookie = `loginInfo=;expires=${expires.toGMTString()}`;
            }
        }

        //3.在下次访问登录页面时，可以使用js从浏览器cookie中获取保存的用户名和密码
        function getLoginInfo() {
            let cookie = document.cookie;
            let cookies = cookie.split("; ");
            let loginInfo = "";
            for (let ck of cookies) {
                let name = ck.split("=")[0];
                if (name == 'loginInfo') {
                    loginInfo = ck.split("=")[1]
                    break;
                }
            }
            if (loginInfo !== "") {
                // admin:123
                let userInfo = loginInfo.split(":");
                // 返回用户名和密码组成的对象
                return { username: userInfo[0], password: userInfo[1] };
            } else {
                return null;
            }
        }

        //4.页面加载成功
        window.onload = function () {
            //调用获取登录信息的方法
            let loginInfo = getLoginInfo();
            if (loginInfo !== null) {
                username.value = loginInfo.username;
                password.value = loginInfo.password;
                remember.checked = true;
            }
        }

        //定义函数，记住密码
        function rememberMe(uname, upass) {
            let expires = new Date();
            // 设置cookie的过期时间为7天后
            expires.setDate(expires.getDate() + 7);
            // 将用户名和密码使用冒号:隔开，拼接成一个字符串
            let loginInfo = `${uname}:${upass}`;
            // 将字符串保存到cookie中,expires设置过期时间
            document.cookie = `loginInfo=${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(uname, upass) {
  //1.定义对象
  let userInfo = { username: uname, userpass: upass };
  //2.将对象转换成字符串
  let str = JSON.stringify(userInfo);
  //3.将值存入到localStorage中
  localStorage.setItem('userInfo', str);
}

●我们将用户名和密码作为一个对象，通过JSON.stringify()方法将其转换为字符串；

●使用 localStorage.setItem() 方法将字符串保存到localStorage中，key的值为“userinfo”；

2.2 获取localStorage

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

function getLoginInfo() {
  //1.从localStorage中获取值
  let str = localStorage.getItem('userInfo');
  //2.将字符串转换成obj
  if (str) {
    let obj = JSON.parse(str);
    return obj;
  }
  return null;
}

●使用localStorage.getItem()方法从localStorage中获取保存的用户信息；

●如果有保存的信息，则使用JSON.parse()方法将字符串转换为对象；

●将用户名和密码返回；

2.3示例

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="xxx" 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>
        //1.获取表单
        var form = document.querySelector("form");
        var username = document.querySelector("input[name='username']");
        var password = document.querySelector("input[name='password']");
        var remember = document.querySelector("input[name='remember']");
        //2.为表单绑定提交事件
        form.onsubmit = function (event) {
            if (remember.checked) {
                //需要记住密码
                rememberMe(username.value, password.value);
            } else {
                //不记住密码
                localStorage.removeItem('userInfo');
            }
        }

        //3.获取登录信息方法
        function getLoginInfo() {
            //1.从localStorage中获取值
            let str = localStorage.getItem('userInfo');
            //2.将字符串转换成obj
            if (str) {
                let obj = JSON.parse(str);
                return obj;
            }
            return null;
        }

        //4.页面加载成功
        window.onload = function () {
            //调用获取登录信息的方法
            let loginInfo = getLoginInfo();
            if (loginInfo !== null) {
                username.value = loginInfo.username;
                password.value = loginInfo.password;
                remember.checked = true;
            }
        }

        //定义函数，记住密码
        function rememberMe(uname, upass) {
            //1.定义对象
            let userInfo = { username: uname, userpass: upass };
            //2.将对象转换成字符串
            let str = JSON.stringify(userInfo);
            //3.将值存入到localStorage中
            localStorage.setItem('userInfo', str);
        }

    </script>

</body>

</html>

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

总结

到此这篇关于使用JavaScript实现记住密码功能的文章就介绍到这了,更多相关js记住密码功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文