使用JavaScript實(shí)現(xiàn)記住密碼功能詳細(xì)代碼示例
1使用cookie實(shí)現(xiàn)記住密碼功能
1.1 設(shè)置cookie
在用戶登錄成功后,可以使用js將用戶名和密碼以cookie的形式保存在瀏覽器中,代碼如下:
//定義函數(shù),記住密碼 function rememberMe(uname, upass) { let expires = new Date(); // 設(shè)置cookie的過期時(shí)間為7天后 expires.setDate(expires.getDate() + 7); // 將用戶名和密碼使用冒號(hào):隔開,拼接成一個(gè)字符串 let loginInfo = `${uname}:${upass}`; // 將字符串保存到cookie中 document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`; }
●expires 是設(shè)置 cookie 的過期時(shí)間,通過 setDate 方法設(shè)置為當(dāng)前日期 + 7 天后的時(shí)間;
●loginInfo 是將用戶名和密碼使用冒號(hào)隔開拼接成的字符串,便于在下次登錄時(shí)解析;
●document.cookie 是將字符串保存到 cookie 中,其中 expires 是通過 toGMTString() 方法將過期時(shí)間轉(zhuǎn)化為 GMT 格式;
1.2獲取cookie
在下次訪問登錄頁(yè)面時(shí),可以使用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(":"); // 返回用戶名和密碼組成的對(duì)象 return { username: userInfo[0], password: userInfo[1] }; } else { return null; } }
●document.cookie是從瀏覽器中獲取保存的cookie;
●cookie.split("; ")是將cookie字符串按照分號(hào)空格分割成數(shù)組;
●loginInfo是用來保存當(dāng)前登錄用戶的用戶名和密碼;
●userInfo 是將用戶名和密碼從字符串中分離出來,組成一個(gè)包含兩個(gè)屬性的對(duì)象;
1.3示例
下面以一個(gè)簡(jiǎn)單的登錄頁(yè)面為例,演示如何使用cookie實(shí)現(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="請(qǐng)輸入用戶名"><br> <input type="password" name="password" placeholder="請(qǐng)輸入密碼"><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.在下次訪問登錄頁(yè)面時(shí),可以使用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(":"); // 返回用戶名和密碼組成的對(duì)象 return { username: userInfo[0], password: userInfo[1] }; } else { return null; } } //4.頁(yè)面加載成功 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(); // 設(shè)置cookie的過期時(shí)間為7天后 expires.setDate(expires.getDate() + 7); // 將用戶名和密碼使用冒號(hào):隔開,拼接成一個(gè)字符串 let loginInfo = `${uname}:${upass}`; // 將字符串保存到cookie中,expires設(shè)置過期時(shí)間 document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`; } </script> </body> </html>
該頁(yè)面包含了一個(gè)form表單,其中有用戶名、密碼和“記住密碼”的復(fù)選框。在表單提交時(shí),會(huì)根據(jù)復(fù)選框的狀態(tài)使用rememberMe()函數(shù)設(shè)置或清除cookie,用戶下一次打開頁(yè)面時(shí),用戶名和密碼會(huì)自動(dòng)填充,同時(shí)復(fù)選框也會(huì)被選上。使用getLoginInfo()函數(shù)從cookie中獲取用戶名和密碼,然后將用戶名和密碼填入表單中即可。
2使用localStorage實(shí)現(xiàn)記住密碼功能
2.1 設(shè)置localStorage
除了使用cookie之外,localStorage也是保存數(shù)據(jù)的一種常用方式。localStorage和cookie的不同之處在于,localStorage保存的數(shù)據(jù)不會(huì)隨著瀏覽器請(qǐng)求發(fā)送到服務(wù)器端,因此更加安全。那么如何使用localStorage保存用戶名和密碼呢?代碼如下:
function rememberMe(uname, upass) { //1.定義對(duì)象 let userInfo = { username: uname, userpass: upass }; //2.將對(duì)象轉(zhuǎn)換成字符串 let str = JSON.stringify(userInfo); //3.將值存入到localStorage中 localStorage.setItem('userInfo', str); }
●我們將用戶名和密碼作為一個(gè)對(duì)象,通過JSON.stringify()方法將其轉(zhuǎn)換為字符串;
●使用 localStorage.setItem() 方法將字符串保存到localStorage中,key的值為“userinfo”;
2.2 獲取localStorage
在用戶下次訪問登錄頁(yè)面時(shí),可以使用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)換為對(duì)象;
●將用戶名和密碼返回;
2.3示例
下面以一個(gè)示例頁(yè)面為例,演示如何使用localStorage實(shí)現(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="請(qǐng)輸入用戶名"><br> <input type="password" name="password" placeholder="請(qǐng)輸入密碼"><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.頁(yè)面加載成功 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.定義對(duì)象 let userInfo = { username: uname, userpass: upass }; //2.將對(duì)象轉(zhuǎn)換成字符串 let str = JSON.stringify(userInfo); //3.將值存入到localStorage中 localStorage.setItem('userInfo', str); } </script> </body> </html>
該頁(yè)面與之前的例子類似,但現(xiàn)在我們使用localStorage保存用戶信息。使用 localStorage.getItem() 方法從localStorage中獲取保存的信息??梢酝ㄟ^ JSON.parse() 方法將字符串轉(zhuǎn)化為對(duì)象,然后將用戶名和密碼填入表單中即可。在表單提交時(shí)同樣使用記住密碼和清除信息兩種操作。
總結(jié)
到此這篇關(guān)于使用JavaScript實(shí)現(xiàn)記住密碼功能的文章就介紹到這了,更多相關(guān)js記住密碼功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù)示例
這篇文章主要介紹了JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù),涉及javascript針對(duì)字符串的遍歷、統(tǒng)計(jì)、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下2019-07-07淺談JavaScript的計(jì)時(shí)器對(duì)象
下面小編就為大家?guī)硪黄獪\談JavaScript的計(jì)時(shí)器對(duì)象。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-12-12JS用斜率判斷鼠標(biāo)進(jìn)入DIV四個(gè)方向的方法
在網(wǎng)上去搜判斷鼠標(biāo)移入div移入移出的方法大同小異,下面小編給大家分享一篇文章關(guān)于js判斷鼠標(biāo)進(jìn)入div方向的代碼,感興趣的朋友一起看看吧2016-11-11詳解JavaScript中Arguments對(duì)象用途
本文主要介紹了詳解JavaScript中Arguments對(duì)象用途,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08js實(shí)現(xiàn)對(duì)ajax請(qǐng)求面向?qū)ο蟮姆庋b
這篇文章主要介紹了js實(shí)現(xiàn)對(duì)ajax請(qǐng)求面向?qū)ο蟮姆庋b的相關(guān)資料,需要的朋友可以參考下2016-01-01