最近写项目的时候,遇到客户需求一个记住密码的功能。于是在前端,存取cookie实现了记住密码。
下面的代码可以直接拿过来用。
把相应的ID 和 时间复制过去。
js代码完全复制过去就行了 ,不用改。
ps:此功能的记住密码,没有记住账号功能。就是说账号需要自己输入,光标离开用户名输入框之后,密码会自动读取
代码中的button按钮可以改成submit按钮
HTML
<form id=
"form1"
>
<div> 用户名:
<input type=
"text"
ID=
"txtUserName"
onblur=
"GetPwdAndChk()"
>
<input type=
"password"
ID=
"txtPassword"
>
密码:
<input type=
"checkbox"
ID=
"chkRememberPwd"
/>
记住密码
<input type=
"button"
OnClick=
"SetPwdAndChk()"
value=
"进入"
/>
</div>
</form>
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 =
"<%= 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);
}
</script>
转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22969.html
微信打赏
支付宝打赏
感谢您对作者harbour的打赏,我们会更加努力! 如果您想成为作者,请点我
注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。