本文介紹的記住使用者名稱、密碼功能是借用jQuery外掛方式實現。

1.      從網上下載jquery.cookie.js，拷貝到應用程式中。

2.      登入頁面（login.jsp）匯入jquery.cookie.js

<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.cookie.js"></script>

頁面元素如下：

<input type='text' name='j_username' id="j_username"
<c:if test="${not empty param.login_error}">value='<c:out value="${ACEGI_SECURITY_LAST_USERNAME}"/>'
</c:if>
/>
<input type='password' name='password' id="password"/><input type="hidden" name="j_password" id="j_password"/><input type="checkbox" name="cookiePwd" id="cookiePwd" value="" style="background:none;width:20px;border:none;"/>記住此密碼

<a href="#"><img src="./img/btn_dl.gif" onclick="doLogin()"/></a><!-- 登入按鈕-->

<a href="#"><img src="./img/btn_reset.gif" onclick="doReset()"/></a><!-- 重置按鈕-->

 

 頁面格局如下：

3.      實現登入事件(當用戶點選登入後，儲存使用者名稱、密碼到本地Cookie中)

<script type="text/javascript">
            function doLogin()
            {
            	/** 實現記住密碼功能 */
            	var $n = $('#j_username');
            	var $p = $('#password');
            	
            	
            	var n = $n.val();
            	var p = $p.val();
            	if(n==null || n==''){
            		alert('請輸入使用者名稱！');
            		$n.focus();
            		return;
            	}
            	if(p==null || p==''){
            		alert('請輸入密碼！');
            		$p.focus();
            		return;
            	}
            	if($('#cookiePwd').attr('checked')){
            		$.cookie('username', n, {expires:7});
            		$.cookie('password', p, {expires:7});
            	}else{
            		$.cookie('username', null);
            		$.cookie('password', null);
            	}
            	$('#j_username').val(n);
                $('#j_password').val(hex_md5(p));   //密碼加密
            
            
            
                var p1 = document.forms[0].password;
                var p2 = document.forms[0].j_password;
                p2.value = hex_md5(p1.value);
                document.forms[0].submit();
            }
        </script>

這樣，儲存使用者名稱密碼到Cookie功能就實現了。

4      實現初始化事件：當用戶開啟登入頁面時，如果上次操作選擇了記住密碼功能，則初始化上次輸入的使用者名稱密碼：

script type="text/javascript">
(function(){
			var n = $.cookie('username');
           	var p = $.cookie('password');
           	
           	if(n!=null) $('#j_username').val(n);
           	if(p!=null) $('#password').val(p);
           	
           	
           	if(p!=null){
           		$('#cookiePwd').attr('checked', true);
           	}else{
           		$('#cookiePwd').attr('checked', false);
           	}
           	
			$('#cookiePwd').click(function(){
				if($(this).attr('checked')){
					$('#cookieInfo').attr('checked', true);
				}
			});
			
			$('#password').keypress(function(e){
				if(e.which == 13){ //Enter
					doLogin();
				}
			});
		});
       </script>
 

通過以上操作，實現記住使用者名稱、密碼功能就完成了，趕緊試試吧！