前端实现记住密码功能

最近写项目的时候,遇到客户需求一个记住密码的功能。于是在前端,存取cookie实现了记住密码。

下面的代码可以直接拿过来用。

把相应的ID 和 时间复制过去。

js代码完全复制过去就行了 ,不用改。

ps:此功能的记住密码,没有记住账号功能。就是说账号需要自己输入,光标离开用户名输入框之后,密码会自动读取

代码中的button按钮可以改成submit按钮

HTML

<form id= "form1" >

用户名:

<input type= "text" ID= "txtUserName" onblur= "GetPwdAndChk()" >

<input type= "password" ID= "txtPassword" >

密码:

<input type= "checkbox" ID= "chkRememberPwd" />

记住密码

<input type= "button" OnClick= "SetPwdAndChk()" value= "进入" />

JS

<script type=
"text/javascript"
>


window.onload=
function
onLoginLoaded() {


if
(isPostBack ==
"False"
) {


GetLastUser();


}


}


function
GetLastUser() {


var
id =
"49BAC005-7D5B-4231-8CEA-16939BEACD67"
;
//GUID标识符


var
usr = GetCookie(id);


if
(usr !=
null
) {


document.getElementById(
'txtUserName'
).value = usr;


}
else
{


document.getElementById(
'txtUserName'
).value =
"001"
;


}


GetPwdAndChk();


}


//点击登录时触发客户端事件


function
SetPwdAndChk() {


//取用户名


var
usr = document.getElementById(
'txtUserName'
).value;


alert(usr);


//将最后一个用户信息写入到Cookie


SetLastUser(usr);


//如果记住密码选项被选中


if
(document.getElementById(
'chkRememberPwd'
).checked ==
true
) {


//取密码值


var
pwd = document.getElementById(
'txtPassword'
).value;


alert(pwd);


var
expdate =
new
Date();


expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));


//将用户名和密码写入到Cookie


SetCookie(usr, pwd, expdate);


}
else
{


//如果没有选中记住密码,则立即过期


ResetCookie();


}


}


function
SetLastUser(usr) {


var
id =
"49BAC005-7D5B-4231-8CEA-16939BEACD67"
;


var
expdate =
new
Date();


//当前时间加上两周的时间


expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));


SetCookie(id, usr, expdate);


}


//用户名失去焦点时调用该方法


function
GetPwdAndChk() {


var
usr = document.getElementById(
'txtUserName'
).value;


var
pwd = GetCookie(usr);


if
(pwd !=
null
) {


document.getElementById(
'chkRememberPwd'
).checked =
true
;


document.getElementById(
'txtPassword'
).value = pwd;


}
else
{


document.getElementById(
'chkRememberPwd'
).checked =
false
;


document.getElementById(
'txtPassword'
).value =
""
;


}


}


//取Cookie的值


function
GetCookie(name) {


var
arg = name +
"="
;


var
alen = arg.length;


var
clen = document.cookie.length;


var
i = 0;


while
(i < clen) {


var
j = i + alen;


//alert(j);


if
(document.cookie.substring(i, j) == arg)
return
getCookieVal(j);


i = document.cookie.indexOf(
" "
, i) + 1;


if
(i == 0)
break
;


}


return
null
;


}


var
isPostBack =
""
;


function
getCookieVal(offset) {


var
endstr = document.cookie.indexOf(
";"
, offset);


if
(endstr == -1) endstr = document.cookie.length;


return
unescape(document.cookie.substring(offset, endstr));


}


//写入到Cookie


function
SetCookie(name, value, expires) {


var
argv = SetCookie.arguments;


//本例中length = 3


var
argc = SetCookie.arguments.length;


var
expires = (argc > 2) ? argv[2] :
null
;


var
path = (argc > 3) ? argv[3] :
null
;


var
domain = (argc > 4) ? argv[4] :
null
;


var
secure = (argc > 5) ? argv[5] :
false
;


document.cookie = name +
"="
+ escape(value) + ((expires ==
null
) ?
""
: (
"; expires="
+ expires.toGMTString())) + ((path ==
null
) ?
""
: (
"; path="
+ path)) + ((domain ==
null
) ?
""
: (
"; domain="
+ domain)) + ((secure ==
true
) ?
"; secure"
:
""
);


}


function
ResetCookie() {


var
usr = document.getElementById(
'txtUserName'
).value;


var
expdate =
new
Date();


SetCookie(usr,
null
, expdate);


}

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22969.html

微信打赏

支付宝打赏

感谢您对作者harbour的打赏,我们会更加努力! 如果您想成为作者,请点我

IT985博客责编内容来自:IT985博客 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 前端实现记住密码功能

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录