使用JavaScript實現(xiàn)記住密碼功能詳細代碼示例

更新時間：2025年05月30日 09:15:20 作者：TOYG

這篇文章主要給大家介紹了關(guān)于使用JavaScript實現(xiàn)記住密碼功能的相關(guān)資料,文中通過示例講解了使用Cookie和LocalStorage實現(xiàn)登錄記住密碼功能的兩種方法,需要的朋友可以參考下

1使用cookie實現(xiàn)記住密碼功能

1.1 設置cookie

在用戶登錄成功后，可以使用js將用戶名和密碼以cookie的形式保存在瀏覽器中，代碼如下：

//定義函數(shù)，記住密碼
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() 方法將過期時間轉(zhuǎn)化為 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字符串按照分號空格分割成數(shù)組；

●loginInfo是用來保存當前登錄用戶的用戶名和密碼；

●userInfo 是將用戶名和密碼從字符串中分離出來，組成一個包含兩個屬性的對象；

1.3示例

下面以一個簡單的登錄頁面為例，演示如何使用cookie實現(xiàn)記住密碼功能。

<!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 () {
            //調(diào)用獲取登錄信息的方法
            let loginInfo = getLoginInfo();
            if (loginInfo !== null) {
                username.value = loginInfo.username;
                password.value = loginInfo.password;
                remember.checked = true;
            }
        }

        //定義函數(shù)，記住密碼
        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表單，其中有用戶名、密碼和“記住密碼”的復選框。在表單提交時，會根據(jù)復選框的狀態(tài)使用rememberMe()函數(shù)設置或清除cookie，用戶下一次打開頁面時，用戶名和密碼會自動填充，同時復選框也會被選上。使用getLoginInfo()函數(shù)從cookie中獲取用戶名和密碼，然后將用戶名和密碼填入表單中即可。

2使用localStorage實現(xiàn)記住密碼功能

2.1 設置localStorage

除了使用cookie之外，localStorage也是保存數(shù)據(jù)的一種常用方式。localStorage和cookie的不同之處在于，localStorage保存的數(shù)據(jù)不會隨著瀏覽器請求發(fā)送到服務器端，因此更加安全。那么如何使用localStorage保存用戶名和密碼呢？代碼如下：

function rememberMe(uname, upass) {
  //1.定義對象
  let userInfo = { username: uname, userpass: upass };
  //2.將對象轉(zhuǎn)換成字符串
  let str = JSON.stringify(userInfo);
  //3.將值存入到localStorage中
  localStorage.setItem('userInfo', str);
}

●我們將用戶名和密碼作為一個對象，通過JSON.stringify()方法將其轉(zhuǎn)換為字符串；

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

2.2 獲取localStorage

在用戶下次訪問登錄頁面時，可以使用js從localStorage中獲取保存的用戶名和密碼，代碼如下：

function getLoginInfo() {
  //1.從localStorage中獲取值
  let str = localStorage.getItem('userInfo');
  //2.將字符串轉(zhuǎn)換成obj
  if (str) {
    let obj = JSON.parse(str);
    return obj;
  }
  return null;
}

●使用localStorage.getItem()方法從localStorage中獲取保存的用戶信息；

●如果有保存的信息，則使用JSON.parse()方法將字符串轉(zhuǎn)換為對象；

●將用戶名和密碼返回；

2.3示例

下面以一個示例頁面為例，演示如何使用localStorage實現(xiàn)記住密碼功能。

<!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.將字符串轉(zhuǎn)換成obj
            if (str) {
                let obj = JSON.parse(str);
                return obj;
            }
            return null;
        }

        //4.頁面加載成功
        window.onload = function () {
            //調(diào)用獲取登錄信息的方法
            let loginInfo = getLoginInfo();
            if (loginInfo !== null) {
                username.value = loginInfo.username;
                password.value = loginInfo.password;
                remember.checked = true;
            }
        }

        //定義函數(shù)，記住密碼
        function rememberMe(uname, upass) {
            //1.定義對象
            let userInfo = { username: uname, userpass: upass };
            //2.將對象轉(zhuǎn)換成字符串
            let str = JSON.stringify(userInfo);
            //3.將值存入到localStorage中
            localStorage.setItem('userInfo', str);
        }

    </script>

</body>

</html>

該頁面與之前的例子類似，但現(xiàn)在我們使用localStorage保存用戶信息。使用 localStorage.getItem() 方法從localStorage中獲取保存的信息?？梢酝ㄟ^ JSON.parse() 方法將字符串轉(zhuǎn)化為對象，然后將用戶名和密碼填入表單中即可。在表單提交時同樣使用記住密碼和清除信息兩種操作。