B/S系统登录记住密码的实现

用Js实现B/S系统登录时记住密码的功能分为两步：

    1.第一次登录时如果选中记住密码，将用户名和密码保存到cookie中去。

     2.登录时获取cookie中的用户名和密码设置给登录界面上的用户名和密码，如果cookie中没有则不存在保存的密码。

具体的实现如下：

     (1).简单的登录页面

<div class="loginbox">
	    <ul>
		    <li>用户名：  <input id="userid" name="userid" type="text" class="loginuser" value="admin" dataType="Require" msg="用户名称不能为空！" οnclick="JavaScript:this.value=''"/></li>
		    <li>密   码：  <input id="password" name="password" type="password" class="loginpwd" value="" dataType="Require" msg="角色密码不能为空！" οnclick="JavaScript:this.value=''"/></li>
		    <li>         <input type="button" class="loginbtn" value="登录" οnclick="checkLogin()"/>
				<label>
			    	<input id="rembpass" name="rembpass" type="checkbox" value="" checked="checked" />记住密码
			    </label>
		    </li>	    
	    </ul>
    </div>

    (2).页面的开始方法中就去cookie中获取用户名和密码

$(function(){
	$('input:text:first').focus();
	var $inp = $('input:text');
	$inp.bind('keydown', function (e) {
		var key = e.which;
		if (key == 13) {   //enter
			$("#loginForm").submit();
		}
	}); 
	var $inpwd = $('input:password');
	$inpwd.bind('keydown', function (e) {
		var key = e.which;
		if (key == 13) {   //enter
			$("#loginForm").submit();
		}
	});
	
	GetLastUser();
	$('#rembpass').click(function(){
		SetPwdAndChk();
	});
});

    (3).GetLastUser()方法   获取cookie中的最后一次登录的用户以及设置最后一次登录用户

function GetLastUser() {
    var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符
    var usr = GetCookie(id);
    if (usr != null) {
    	$('#userid').val(usr);
    } else {
    	$('#userid').val('admin');
    }
    GetPwdAndChk();
}
<pre name="code" class="html">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);
}

  (4).SetPwdAndChk()设置cookie中的密码

function SetPwdAndChk() {
    //取用户名
    var usr = $('#userid').val();
    //将最后一个用户信息写入到Cookie
    SetLastUser(usr);
    //如果记住密码选项被选中
    var obj = $('#rembpass');
    if (document.getElementById('rembpass').checked == true) {
        //取密码值
        var pwd = $('#password').val();
        var expdate = new Date();
        expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
        //将用户名和密码写入到Cookie
        SetCookie(usr, pwd, expdate);
    } else {
        //如果没有选中记住密码,则立即过期
        ResetCookie();
    }
}

 (5)GetPwdAndChk()获取cookie中的用户名和密码

function GetPwdAndChk() {
    var usr = $('#userid').val();
    var pwd = GetCookie(usr);
    if (pwd != null) {
    	$('#rembpass').context.checked = true;
    	$('#password').val(pwd);
    } else {
    	$('#rembpass').context.checked = false;
    	$('#password').val('');
    }

   (6).设置和获取以及重置cookie的方法

function ResetCookie() {
    var usr = $('#userid').val();
    var expdate = new Date();
    SetCookie(usr, null, expdate);
}

function SetCookie(name, value, expires) {
    var argv = SetCookie.arguments;
    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 GetCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}