<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>记住密码</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<form id="loginForm" action="#" method="get" method="post">
账号<input type="text" id="username">
密码<input type="password" id="password">
<input id="rememberMe" type="checkbox" checked="checked">记住密码
<button>提交</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
var oForm = document.getElementById('loginForm');
var oUser = document.getElementById('username');
var oPswd = document.getElementById('password');
var oRemember = document.getElementById('rememberMe');
//页面初始化时,如果帐号密码cookie存在则赋值
if(getCookie('username') && getCookie('password')){
oUser.value = getCookie('username');
oPswd.value = getCookie('password');
oRemember.checked = true;
}
//复选框勾选状态发生改变时,如果未勾选则清除cookie
oRemember.onchange = function(){
if(!this.checked){
delCookie('username');
delCookie('password');
}
};
//表单提交事件触发时,如果复选框是勾选状态则保存cookie
oForm.onsubmit = function(){
if(rememberMe.checked){
setCookie('username',oUser.value,10); //保存帐号到cookie,有效期10天
setCookie('password',oPswd.value,10); //保存密码到cookie,有效期10天
}
};
//设置cookie
function setCookie(name,value,day){
var date = new Date();
date.setDate(date.getDate() + day);
document.cookie = name + '=' + value + ';expires='+ date;
};
//获取cookie
function getCookie(name){
var reg = RegExp(name+'=([^;]+)');
var arr = document.cookie.match(reg);
if(arr){
return arr[1];
}else{
return '';
}
};
//删除cookie
function delCookie(name){
setCookie(name,null,-1);
};
});
</script>
</body>
</html>
PS:了解cookie