JavaScript实现记住密码：Cookie与LocalStorage方案详解

作者：小括号时间：2026-10-31 21:10:41浏览：484

本文详细介绍如何使用JavaScript实现登录页面的记住密码功能。通过对比Cookie和localStorage两种存储方式，分别提供设置与获取数据的完整代码示例。文章涵盖过期时间设置、数据序列化及表单自动填充逻辑，帮助开发者根据安全性与容量需求选择合适的方案。

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

1.1 设置Cookie

在用户登录成功后，可以利用JavaScript将用户名和密码以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

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

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

在用户下次访问登录页面时，可以使用JavaScript从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记住密码功能内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败

2026-11-05 16:08:46

JavaScript常见SyntaxError语法错误排查与修复方法

2026-11-05 13:58:44

JS中slice、substring和substr截取字符串的区别

2026-11-05 13:43:47

JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型

2026-11-05 11:53:32

为什么JS数组push后得到的是数字而不是数组？

2026-11-05 09:59:18