第一个文件代码：登录前
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="btn" value="登录"/>
<input type="button" id="btn1" value="退出" />
<script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
<script type="text/javascript" src="../js/jquery.cookie.js" ></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oBtn1 = document.getElementById('btn1');
oBtn.onclick = function(){
alert("成功登录");
//保存登录成功的信息
$.cookie("login","success");
$.cookie("name","lili");
}
oBtn1.onclick = function(){
alert("成功退出");
//删除登录成功的信息
$.removeCookie("login");
$.removeCookie("name");
}
}
</script>
</body>
</html>
第二个文件代码：登陆后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="con">请登录</div>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
<script type="text/javascript" src="../js/jquery.cookie.js" ></script>
<script type="text/javascript">
window.onload = function(){
var oCon = document.getElementById('con');
//获取cookie
var login = $.cookie('login');
var name = $.cookie('name');
if(login == 'success'){
oCon.innerHTML = "欢迎"+name+"，登录***网站";
}else{
oCon.innerHTML = '请登录';
}
}
</script>
</body>
</html>