js记住用户名密码

js记住用户名密码

共计以下4个文件  点击“下载”
    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 >

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 >

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  (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( " 用户名或密码错误，请重新输入！ " );    
     }
}