JavaScript登錄記住密碼操作(超簡(jiǎn)單代碼)
更新時(shí)間：2017年03月22日 15:51:33 作者：lihefei_coder
本文給大家分享一段簡(jiǎn)單的js代碼實(shí)現(xiàn)用戶登錄記住密碼操作，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>記住密碼</title>
</head>
<body>
<form id="loginForm">
<input id="user" type="text" placeholder="用戶名"><br>
<input id="pswd" type="password" placeholder="密碼"><br>
<label><input id="remember" type="checkbox">記住密碼</label><br>
<input type='submit' value="登錄">
</form>
<script>
window.onload = function(){
var oForm = document.getElementById('loginForm');
var oUser = document.getElementById('user');
var oPswd = document.getElementById('pswd');
var oRemember = document.getElementById('remember');
//頁(yè)面初始化時(shí)，如果帳號(hào)密碼cookie存在則填充
if(getCookie('user') && getCookie('pswd')){
oUser.value = getCookie('user');
oPswd.value = getCookie('pswd');
oRemember.checked = true;
}
//復(fù)選框勾選狀態(tài)發(fā)生改變時(shí)，如果未勾選則清除cookie
oRemember.onchange = function(){
if(!this.checked){
delCookie('user');
delCookie('pswd');
}
};
//表單提交事件觸發(fā)時(shí)，如果復(fù)選框是勾選狀態(tài)則保存cookie
oForm.onsubmit = function(){
if(remember.checked){
setCookie('user',oUser.value,7); //保存帳號(hào)到cookie，有效期7天
setCookie('pswd',oPswd.value,7); //保存密碼到cookie，有效期7天
}
};
};
//設(shè)置cookie
function setCookie(name,value,day){
var date = new Date();
date.setDate(date.getDate() + day);
document.cookie = name + '=' + value + ';expires='+ date;
};
//獲取cookie
function getCookie(name){
var reg = RegExp(name+'=([^;]+)');
var arr = document.cookie.match(reg);
if(arr){
return arr[1];
}else{
return '';
}
};
//刪除cookie
function delCookie(name){
setCookie(name,null,-1);
};
</script>
</body>
</html>
以上所述是小編給大家介紹的JavaScript登錄記住密碼操作(超簡(jiǎn)單代碼)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了typescript中聲明合并介紹，類型合并表明編譯器將合并兩個(gè)分開的并且名稱相同的聲明，合并之后的聲明擁有兩個(gè)聲明的特點(diǎn)，任意數(shù)量的聲明可以被合并，不僅限兩個(gè)，更多相關(guān)內(nèi)容需要的朋友可以參考下面文章內(nèi)容2022-09-09
微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解
這篇文章主要介紹了微信小程序開發(fā)中實(shí)現(xiàn)事件傳參與數(shù)據(jù)同步的詳細(xì)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript類的寫法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
bootstrap的3級(jí)菜單樣式,支持母版頁(yè)保留打開狀態(tài)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇bootstrap的3級(jí)菜單樣式,支持母版頁(yè)保留打開狀態(tài)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了js中如何對(duì)url進(jìn)行編碼和解碼問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
JS實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速的實(shí)例代碼
這篇文章主要介紹了通過(guò)JS來(lái)實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了ES6解構(gòu)賦值,結(jié)合實(shí)例形式較為詳細(xì)的分析了ES6結(jié)構(gòu)賦值的基本概念、原理與使用方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JS提交form表單的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了頁(yè)面加載時(shí)提交表單及通過(guò)鏈接提交表單的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
麥雞的TAB切換功能代碼2008-10-10
Nodejs使用mysql模塊之獲得更新和刪除影響的行數(shù)的方法
業(yè)余時(shí)間玩nodejs的時(shí)候遇到的情況, 在使用mysql模塊連接mysql操作, 想在update, delete語(yǔ)句的時(shí)候, 想知道到底u(yù)pdate, delete成功了沒有2014-03-03