zoukankan      html  css  js  c++  java
  • JavaScript: Cookie 详解、实例与应用

    Cookie(也)是JavaScript中的一种机制,可以实现严格的跨页面全局变量的要求。

    Cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。

    在Cookie设置中,用escape()函数进行编码,可避免乱码和特殊字符问题; 当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

    设置Cookie时可以直接给document.cookie赋值:

    1document.cookie="userId=828";
    2document.cookie="userName=hulk";


    而且后面的值不会覆盖前面的值,它具有一种累加机制。
    cookie的值可以由document.cookie直接获得,但这样获取的是所有的cookie值;要通过一指定cookie名称来获得所对应的值,则需做一些处理。

    构造通用的cookie处理函数:

     1<script type="text/javascript">
     2 /***
     3 * 设置Cookie (通用函数)
     4 * @param {string} cookieName Cookie 名称
     5 * @param {string} cookieValue Cookie 值
     6 * @param {string} nDays Cookie 过期天数
     7 */

     8 function SetCookie(cookieName, cookieValue, nDays)
     9 {
    10     /* 当前日期 */
    11     var today = new Date();
    12 
    13     /* Cookie 过期时间 */
    14     var expire = new Date();
    15
    16     /* 如果未设置nDays参数或者nDays为0,取默认值 1 */
    17     if(nDays == null || nDays == 0
    18        nDays = 1;
    19     
    20      /* 计算Cookie过期时间 */
    21      expire.setTime(today.getTime() + nDays * 24 * 60 * 60 * 1000); //获取毫秒数
    22       
    23      /* 设置Cookie值 */
    24      document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString();
    25 }
     
    26

      
       下面我来编写一个登录函数,加强理解和应用

     1 // 登录函数
     2 function login()
     3 {
     4    // 用户名
     5    var username = $("user").value;
     6    
     7    // 用户密码
     8    var password = $("pass").value;
     9
    10    // 我们这里设置一额外条件,交友登录用户选择
    11     // 是否7天内无需再登录,即可访问
    12     var save = $("save").checked;
    13    
    14    // 这里,假设一合法的用户名/密码是 admin/admin
    15    if(username == "admin" && password == "admin")
    16    {
    17       // 在Cookie中保存用户名
    18        if(save) 
    19          SetCookie("username",username,7);
    20       else
    21          SetCookie("username",username,1);
    22    
    23       // 通过验证,跳转到下一页面
    24        document.location = "page2.html";
    25    }

    26    else
    27    {
    28       alert("用户名或密码错误!");
    29    }

    30 }

    31
    32 function $(id)
    33 {
    34    return document.getElementById(id);
    35 }

    36
    37</script>


    调用(或称 嵌入)以上Js代码的页面文件,如下:

     1 //Page1.html 的 body 部分,其他省略
     2 <body>
     3  <div id="main">
     4    <div>
     5       <span>用户名:</span> <input type="text" id="user" />
     6    </div>
     7    <div>
     8       <span>密 码:</sapn> <input type="password" id="pass" />
     9    </div> 
    10    <div>
    11       <input type="checkbox" id="save" /> 七天内无需登录
    12    </div>
    13    <div>
    14       <input type="button" onclick="login()" value="登 录" />
    15    </div>
    16 </body>


    页面效果 如下所示:


    前面讲到

    设置Cookie时,可以直接给 document.cookie 赋值:
        document.cookie="userId=828";
        document.cookie="userName=hulk";
    而且后面的值不会覆盖前面的值,它具有一种 累加机制


    Page2.html内部页面(你可以先这样理解),必须在登录后才能使用。该页面需要对用户当前PC的Cookie进行判断,如果发现用户已经通过该机器登录过,该页面则显示 欢迎信息,否则显示“请登录”的链接。

    Page2.html页面的代码如下(下面分开说明):
    (1) Js代码 (通用读取Cookie方法):
     

     <script type="text/javascript">
     
    /*** 
     * 读取指定的Cookie值
     * @param {string} cookieName Cookie名称
     
    */


     
    // 方法一:
     function GetCookie(cookieName)
     
    {
        
    /* Cookie 字符串 */
        
    var theCookie = "" + document.cookie;

        
    /* 找到cookieName的位置 */
        
    var ind = theCookie.indexOf(cookieName);

        
    /* 如果未找到cookieName,返回空字符串 */
        
    if(ind == -1 || cookieName == "")
           
    return "";
        
         
    /* 确定分号的位置 */
         
    var ind1 = theCookie.indexOf(';', ind);
         
    if(ind1 == -1
              ind1 
    = theCookie.length;
         
         
    /* 读取Cookie值 */
         
    return unescape(theCookie.substring(ind+cookieName.length + 1, ind1));
     }


     
    // 方法二:
     function GetCookie(cookieName)
     
    {
        
    var strCookie=document.cookie;

        
    // 将多cookie切割为多个名/值对
        var arrCookie=strCookie.split(""); 

        
    for(var i=0;i<arrCookie.length;i++)
       

          
    // 遍历cookie数组,处理每个cookie对
           var arr=arrCookie[i].split("=");
         
          
    // 找到名称为cookieName的cookie,并返回它的值
           if(arr[0]=="username")
          
    return arr[1];
       }

         
    return "";
    }


    (2) Page2.html HTML 代码部分:
        

      // Page2.html 页面初始加载执行的Js代码:
      function init()
      {
         // 从Cookie中读取用户名信息
          var username = GetCookie("username");
       
         // 如果用户已经登录过
          if(username && username.length >0)
         {
            // 显示欢迎信息
             $("msg").innerHTML = "
    <h2>欢迎光临:"+ username + "!</h2>";
         }
         else
         {
            $("msg").innerHTML = "
    <href='Page1.html'>请返回,登录!</a>";
         }
      }

       function $(id)
       {
          return document.getElementById(id);
       }

       // HTML body部分
       
    <body onload="init()">
          
    <div id="msg"></div>
       
    </body>


    另外,关于删除Cookie,可以使用以下方法:
    该函数可以删除指定名称的cookie:

    <script language="JavaScript" type="text/javascript">

       
    function deleteCookie(username){
       
    var date=new Date();
       
    // // 删除一个cookie,就是将其过期时间设定为一个过去的时间
       date.setTime(date.getTime()-10000); 
       document.cookie
    =name+"=v; expire=" + date.toGMTString();
    }

    </script> 
  • 相关阅读:
    福大软工 · 第十次作业
    最终作业:软工实践个人总结
    第三视角Beta答辩总结
    Beta 冲刺(7/7)
    Beta 冲刺 (6/7)
    Beta 冲刺 (5/7)
    Beta 冲刺 (4/7)
    Beta 冲刺 (3/7)
    Beta 冲刺 (2/7)
    福大软工 · 第十次作业
  • 原文地址:https://www.cnblogs.com/Dlonghow/p/1240109.html
Copyright © 2011-2022 走看看