关闭

js使用cookies的例子

357人阅读 评论(0) 收藏 举报
分类:

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  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.                       
  111.                 <input type="reset" id="resetLogin" name="resetLogin" value="重 置" />  
  112.             </td>  
  113.         </tr>  
  114.     </table>  
  115. </center>  
  116. </body>  
  117. </html>  
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16587次
    • 积分:342
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:13篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论