用cookie做前端页面的记住密码

1.首先，写一个登陆的jsp页面，做一个form表单的post请求，地址链接到自己的servlet文件

<form action="${pageContext.request.contextPath}/pictur"method="post">
	<input type="tel" name="login_name" onkeyup = "value=value.replace(/[^\d]/g,'')" 		id="login_name"  placeholder="手机/用户名" maxlength="11" />
	<input type="password"name="password" id="password" placeholder="请输入密码" 			maxlength="16" />
    <input id="remember" name="remember" type="checkbox">记住密码
	<input type="button" name="btn" value="登 录" id="btn"/>
</form>

表单提交时判断多选框是否选中

var val = $("#remember").prop("checked");
	if (val == true) {
		var remember = $("#remember").val('true');
	} else {
		var remember = $("#remember").val('false');
	}

2.然后写servlet，用户名密码验证，判断是否勾选记住密码，并生成cookie，保存到客户端。

// 封装form表单数据 表单里面的密码
		String login_name = request.getParameter("login_name");
		String passworda = request.getParameter("password");
		String remember = request.getParameter("remember");
		boolean validPassword = Encryption.validPassword(password, passwords);
			System.out.println("登录解密是否成功:" + validPassword);
			PrintWriter out = response.getWriter();
			System.out.println("呵呵:"+remember);
			if("true".equals(remember) && validPassword == true){
				//创建cookie 存放用户名和密码
				Cookie ckl = new Cookie("remember", remember);
				ckl.setMaxAge(7*24*60*60);//存放的时间为7天
				response.addCookie(ckl);
				Cookie ckl2 = new Cookie("login_name", login_name);
				ckl2.setMaxAge(60*60);
				response.addCookie(ckl2);
				Cookie ckl3 = new Cookie("password", password);
				ckl3.setMaxAge(60*60);
				response.addCookie(ckl3);
			}else{
				//清除cookie 
				Cookie[] cks = request.getCookies();
				if(cks != null){
					for (Cookie c : cks) {
						c.setMaxAge(0);
						response.addCookie(c);
					}
				}
			}

3.最后是jsp页面的js代码，实现用户名密码的展示

var cookies = document.cookie.split(';');
		function getCk(mkey) {
			for (var i = 0; i < cookies.length; i++) {
				var kv = cookies[i].split('=');
				if(kv[0].trim() == mkey){
					return kv[1].trim();
				}
			}
			return '';
		}
		//网页加载完成时触发
		window.onload = function() {
			var remember = getCk('remember');
			var login_name = getCk('login_name');
			var password = getCk('password');
			
			console.log(remember+"----");
			console.log(login_name+"----");
			console.log(password+"----");
			//多选框为true时往文本框中加入已经存在cookie里的用户名和密码
			if(remember == 'true'){
				var nameInput = document.getElementById("login_name");
				var passwordInput = document.getElementById("password");
				var rememberInput = document.getElementById("remember");
				rememberInput.checked="checked";
				nameInput.value = login_name;
				passwordInput.value = password;
			}
		}

把密码存入cookie是有盗号风险的，为了解决这个问题，推荐将密码用md5加密，这样就能保证密码的安全了。欢迎大家一起研究，此外，希望大家能手敲一遍，记忆更深刻一些，不希望被复制粘贴，谢谢大家。