CONTENT
login.html
welcome.html
cookie.js
common.js
login.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>login</title>
- <script type="text/javascript" src="cookie.js"></script>
- <script type="text/javascript" src="common.js"></script>
- </head>
- <body>
- <form action="">
- <p>
- <span>UserName:</span>
- <input id="userName" type="text" value=""/></p>
- <p>
- <span>Password:</span>
- <input id="password" type="password" value=""/></p>
- <p>
- <span style="font-size:12px; color:blue;">记住密码</span>
- <input id="saveCookie" type="checkbox" value="" /></p>
- <p>
- <input id="submit" type="button" value="GO" />
- </p>
- </form>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>login</title>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<form action="">
<p>
<span>UserName:</span>
<input id="userName" type="text" value=""/></p>
<p>
<span>Password:</span>
<input id="password" type="password" value=""/></p>
<p>
<span style="font-size:12px; color:blue;">记住密码</span>
<input id="saveCookie" type="checkbox" value="" /></p>
<p>
<input id="submit" type="button" value="GO" />
</p>
</form>
</body>
</html>
welcome.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>welcome</title>
- </head>
- <body>
- <h1>Welcome!</h1>
- <a href="login.html">点击返回登陆框</a>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>welcome</title>
</head>
<body>
<h1>Welcome!</h1>
<a href="login.html">点击返回登陆框</a>
</body>
</html>
cookie.js
- //新建cookie。
- //hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie(如果这个cookie存在)。
- function setCookie(name,value,hours,path){
- var name = escape(name);
- var value = escape(value);
- var expires = new Date();
- expires.setTime(expires.getTime() + hours*3600000);
- path = path == "" ? "" : ";path=" + path;
- _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();
- document.cookie = name + "=" + value + _expires + path;
- }
- //获取cookie值
- function getCookieValue(name){
- var name = escape(name);
- //读cookie属性,这将返回文档的所有cookie
- var allcookies = document.cookie;
- //查找名为name的cookie的开始位置
- name += "=";
- var pos = allcookies.indexOf(name);
- //如果找到了具有该名字的cookie,那么提取并使用它的值
- if (pos != -1){ //如果pos值为-1则说明搜索"version="失败
- var start = pos + name.length; //cookie值开始的位置
- var end = allcookies.indexOf(";",start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
- if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie
- var value = allcookies.substring(start,end); //提取cookie的值
- return unescape(value); //对它解码
- }
- else return ""; //搜索失败,返回空字符串
- }
- //删除cookie
- function deleteCookie(name,path){
- var name = escape(name);
- var expires = new Date(0);
- path = path == "" ? "" : ";path=" + path;
- document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
- }
//新建cookie。 //hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie(如果这个cookie存在)。 function setCookie(name,value,hours,path){ var name = escape(name); var value = escape(value); var expires = new Date(); expires.setTime(expires.getTime() + hours*3600000); path = path == "" ? "" : ";path=" + path; _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString(); document.cookie = name + "=" + value + _expires + path; } //获取cookie值 function getCookieValue(name){ var name = escape(name); //读cookie属性,这将返回文档的所有cookie var allcookies = document.cookie; //查找名为name的cookie的开始位置 name += "="; var pos = allcookies.indexOf(name); //如果找到了具有该名字的cookie,那么提取并使用它的值 if (pos != -1){ //如果pos值为-1则说明搜索"version="失败 var start = pos + name.length; //cookie值开始的位置 var end = allcookies.indexOf(";",start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie var value = allcookies.substring(start,end); //提取cookie的值 return unescape(value); //对它解码 } else return ""; //搜索失败,返回空字符串 } //删除cookie function deleteCookie(name,path){ var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path; }
common.js
- function $(objStr){return document.getElementById(objStr);}
- window.onload = function(){
- //分析cookie值,显示上次的登陆信息
- var userNameValue = getCookieValue("userName");
- $("userName").value = userNameValue;
- var passwordValue = getCookieValue("password");
- $("password").value = passwordValue;
- //写入点击事件
- $("submit").onclick = function()
- {
- var userNameValue = $("userName").value;
- var passwordValue = $("password").value;
- //服务器验证(模拟)
- var isAdmin = userNameValue == "admin" && passwordValue =="123456";
- var isUserA = userNameValue == "userA" && passwordValue =="userA";
- var isMatched = isAdmin || isUserA;
- if(isMatched){
- if( $("saveCookie").checked){
- setCookie("userName",$("userName").value,24,"/");
- setCookie("password",$("password").value,24,"/");
- }
- alert("登陆成功,欢迎你," + userNameValue + "!");
- self.location.replace("welcome.html");
- }
- else alert("用户名或密码错误,请重新输入!");
- }
- }
function $(objStr){return document.getElementById(objStr);} window.onload = function(){ //分析cookie值,显示上次的登陆信息 var userNameValue = getCookieValue("userName"); $("userName").value = userNameValue; var passwordValue = getCookieValue("password"); $("password").value = passwordValue; //写入点击事件 $("submit").onclick = function() { var userNameValue = $("userName").value; var passwordValue = $("password").value; //服务器验证(模拟) var isAdmin = userNameValue == "admin" && passwordValue =="123456"; var isUserA = userNameValue == "userA" && passwordValue =="userA"; var isMatched = isAdmin || isUserA; if(isMatched){ if( $("saveCookie").checked){ setCookie("userName",$("userName").value,24,"/"); setCookie("password",$("password").value,24,"/"); } alert("登陆成功,欢迎你," + userNameValue + "!"); self.location.replace("welcome.html"); } else alert("用户名或密码错误,请重新输入!"); } }