js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)_javascript技巧

2019年7月25日 04:15:16js教程评论1.2K views阅读模式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>js COOKIE 记住帐号或密码</title> 
<script language="javascript" type="text/javascript"> 
function onLoginLoaded() 
{ 
if(isPostBack == "False") 
{ 
GetLastUser(); 
} 
} 
function GetLastUser() 
{ 
var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67"; 
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> 
</head> 
<body onload="onLoginLoaded()"> 
<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> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

测试方法：加入先输入用户名jb51密码为 www.jb51.net，选择记住密码，然后关闭后，重新打开页面，在用户名里面输入jb51，则密码会自动输入密码。