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

更新时间：2025年05月30日 09:15:20 作者：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记住密码功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Ajax使用原生态JS验证用户名是否存在
这篇文章主要为大家详细介绍了Ajax使用原生态JS验证用户名是否存在的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
基于JavaScript实现简单抽奖功能代码实例
这篇文章主要介绍了基于JavaScript实现简单抽奖功能代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
史上最全JavaScript数组去重的十种方法（推荐）
这篇文章主要介绍了JavaScript数组去重的十种方法,利用元素的属性和特性进行不同的去重方法，并实例演示如何测试去重超大数组，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
ES6入门教程之Iterator与for...of循环详解
最近在学习ES6，刚刚看到Iterator和for...of循环这一章，所以想要跟大家略微分享一下，下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料，不足之处还望大家多多指正，需要的朋友们可以参考学习。
2017-05-05
javacript replace 正则取字符串中的值并替换【推荐】
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。这篇文章主要介绍了javacript replace 正则取字符串中的值并替换,需要的朋友可以参考下
2018-09-09
JS 类型转换常见方法小结
JS 类型转换常见方法小结，需要的朋友可以参考下。
2010-05-05
JavaScript实现简单音乐播放器
这篇文章主要为大家详细介绍了JavaScript实现简单音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
JavaScript实现动态高度过渡的3种方式总结
这篇文章主要为大家详细介绍了JavaScript实现动态高度过渡的3种方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
如何利用Proxy更优雅地处理异常详解
这篇文章主要给大家介绍了关于如何利用Proxy更优雅地处理异常的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
从历史讲起JavaScript基因里的函数式编程实例
这篇文章主要为大家介绍了从历史讲起JavaScript基因里的函数式编程实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10