每次在進入登入頁面的時候都要進行使用者名稱和密碼的輸入，使用者的體驗不好。

使用cookie來實現記住密碼的功能。我實現的是邏輯比較簡單的記住密碼操作；並沒有涉及安全性比較高的業務；比如說與支付相關的密碼，例淘寶，基本上每次都需要自己重新輸入密碼。

首先梳理一下記住密碼的操作流程：

1. 頁面點選“記住密碼”選項卡；
2. 傳遞一個“rember”的flag標誌到後臺；
3. 後臺處理使用者資訊和flag標誌位；驗證成功新增一個Cookie；
4. 後臺設定Cookie有效時間和路徑，然後返回一個response；
5. 前臺檢測請求中時候含有使用者資訊的cookie，然後傳遞到使用者名稱和密碼input中的value中

前臺程式碼：

<%  //java
    String name="";  
    String psw="";  
    Cookie[] cookies=request.getCookies();  
    if(cookies!=null&&cookies.length>0){   
        //遍歷Cookie  
        for(int i=0;i<cookies.length;i++){  
            Cookie cookie=cookies[i];  
            //此處類似與Map有name和value兩個欄位,name相等才賦值,並處理編碼問題   
            if("name".equals(cookie.getName())){  
                name=java.net.URLDecoder.decode(cookie.getValue(),"utf-8");  

            }  
            if("psw".equals(cookie.getName())){  
                psw=cookie.getValue();  
            }  
        }  
    }  
 %>  
//dom
<div id="remberBtn" class="rember-box">
			<img src="images/checkbox-icon.png" alt="" >
			<span>記住密碼</span>
		</div>

//jquery scripts
$('#remberBtn').on(oTools.clickEvent, function(){
			var $_this = $(this);
			var selected = $_this.data('rember');
			if (selected != true) {
				$_this.data('rember', true);
				$_this.find('img').attr('src', 'images/checkbox-s-icon.png');
			} else {
				$_this.data('rember', false);
				$_this.find('img').attr('src', 'images/checkbox-icon.png');
			}
		});
 

後臺程式碼：

	private void addCookie(String username, String password,HttpServletResponse response, HttpServletRequest request) throws UnsupportedEncodingException {
		if(!username.equals("") && !password.equals("")){  
	        //建立Cookie  
	        Cookie nameCookie=new Cookie("name",URLEncoder.encode(username,"utf-8"));  
	        Cookie pswCookie=new Cookie("psw",password);  
	          
	        //設定Cookie的父路徑  
	        nameCookie.setPath(request.getContextPath()+"/");  
	        pswCookie.setPath(request.getContextPath()+"/");  
	          
	        //獲取是否儲存Cookie  
	        String rememberMe=request.getParameter("rember");  
	        if(rememberMe==null || rememberMe.equals(false)){//不儲存Cookie  
	            nameCookie.setMaxAge(0);  
	            pswCookie.setMaxAge(0);  
	        }else{//儲存Cookie的時間長度，單位為秒  
	            nameCookie.setMaxAge(7*24*60*60);  
	            pswCookie.setMaxAge(7*24*60*60);  
	        }  
	        //加入Cookie到響應頭  
	        response.addCookie(nameCookie);  
	        response.addCookie(pswCookie);  
	    }  			
		}
 

開發完成之後測試結果；