js操作cookie，实现登录密码保存 [转]

转自：http://blog.csdn.net/zyujie/article/details/8727828 （ 谢谢博主了）

js操作cookie，实现登录密码保存。cookie的存放方式是以键值对的方式保存的。

通常cookie和session，是web开发中用于存储信息的对象，session存在于服务器的内存中，而cookie则是存在客户端，所以js可以直接操作cookie进行信息的存储和读取。

js存放cookie一般的写法，如：document.cookie="userName=admin";，如果是多个键值对：document.cookie="userName=admin; userPass=123"; 

下面是js操作cookie保存用户的登录信息：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script language="javascript" type="text/javascript">
  7 function addCookie(name,value,days,path){    /**添加设置cookie**/
  8     var name = escape(name);
  9     var value = escape(value);
 10     var expires = new Date();
 11     expires.setTime(expires.getTime() + days * 3600000 * 24);
 12     //path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用
 13     path = path == "" ? "" : ";path=" + path;
 14     //GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间，协调世界时是UTC
 15     //参数days只能是数字型
 16     var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
 17     document.cookie = name + "=" + value + _expires + path;
 18 }
 19 function getCookieValue(name){    /**获取cookie的值，根据cookie的键获取值**/
 20     //用处理字符串的方式查找到key对应value
 21     var name = escape(name);
 22     //读cookie属性，这将返回文档的所有cookie
 23     var allcookies = document.cookie;       
 24     //查找名为name的cookie的开始位置
 25     name += "=";
 26     var pos = allcookies.indexOf(name);    
 27     //如果找到了具有该名字的cookie，那么提取并使用它的值
 28     if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败
 29         var start = pos + name.length;                  //cookie值开始的位置
 30         var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
 31         if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie
 32         var value = allcookies.substring(start,end); //提取cookie的值
 33         return (value);                           //对它解码      
 34     }else{    //搜索失败，返回空字符串
 35         return "";
 36     }
 37 }
 38 function deleteCookie(name,path){    /**根据cookie的键，删除cookie，其实就是设置其失效**/
 39     var name = escape(name);
 40     var expires = new Date(0);
 41     path = path == "" ? "" : ";path=" + path;
 42     document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
 43 }
 44 
 45 /**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/
 46 window.onload = function(){
 47     var userNameValue = getCookieValue("userName");
 48     document.getElementById("txtUserName").value = userNameValue;
 49     var userPassValue = getCookieValue("userPass");
 50     document.getElementById("txtUserPass").value = userPassValue;
 51 }
 52 
 53 function userLogin(){    /**用户登录，其中需要判断是否选择记住密码**/
 54     //简单验证一下
 55     var userName = document.getElementById("txtUserName").value;
 56     if(userName == ''){
 57         alert("请输入用户名。");
 58         return;
 59     }
 60     var userPass = document.getElementById("txtUserPass").value;
 61     if(userPass == ''){
 62         alert("请输入密码。");
 63         return;
 64     }
 65     var objChk = document.getElementById("chkRememberPass");
 66     if(objChk.checked){
 67         //添加cookie
 68         addCookie("userName",userName,7,"/");
 69         addCookie("userPass",userPass,7,"/");
 70         alert("记住了你的密码登录。");
 71         window.location.href = "http://www.baidu.com";
 72     }else{
 73         alert("不记密码登录。");
 74         window.location.href = "http://www.baidu.com";
 75     }
 76 }
 77 </script>
 78 </head>
 79 <body>
 80 <center>
 81     <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">
 82         <tr>
 83             <td align="center" colspan="2">欢迎使用XXX管理系统</td>
 84         </tr>
 85         <tr>
 86             <td align="right">
 87                 <label>用户名：</label>
 88             </td>
 89             <td align="left">
 90                 <input type="text" id="txtUserName" name="txtUserName" style="width:160px; margin-left:10px;" />
 91             </td>
 92         </tr>
 93         <tr>
 94             <td align="right">
 95                 <label>密  码：</label>
 96             </td>
 97             <td align="left">
 98                 <input type="password" id="txtUserPass" name="txtUserPass" style="width:160px; margin-left:10px;" />
 99             </td>
100         </tr>
101         <tr>
102             <td align="center" colspan="2">
103                 <span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span>
104                 <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" />
105             </td>
106         </tr>
107         <tr>
108             <td align="center" colspan="2">
109                 <input type="submit" id="subLogin" name="subLogin" value="登 录" onclick="userLogin()"/>
110                 &nbsp;&nbsp;&nbsp;&nbsp;
111                 <input type="reset" id="resetLogin" name="resetLogin" value="重 置" />
112             </td>
113         </tr>
114     </table>
115 </center>
116 </body>
117 </html>

 

posted @ 2015-08-18 15:36  小小——开心  阅读(539)  评论(0)    收藏  举报