2.jquery插件——cookie

首先包含 jQuery 的库文件，在后面包含 jquery.cookie.js 的库文件。

          <!--首先导入jquery库-->

          <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

          <!--其次导入jquery.cookie.js -->

          <script type="text/javascript" src="js/jquery.cookie.js"></script>

 

新添加一个会话 cookie：

     $.cookie('the_cookie', 'the_value');

     注：当没有指明 cookie 有效时间时，所创建的 cookie 有效期默认到用户关闭浏览器为止，

     所以被称为  “会话 cookie（session cookie）”。

 

---

       <!--模拟两个输入框   存入cookie中-->

     请输入cookie的KEY1: <input type="text" id="t200" /><br />

     请输入cookie的value1:< input type="text" id= "t201" />

  <input type="button" value="设定cookie(会话级)" id="b200" />

 

     

     $( "#b200").click( function(){

                                                 var key = $( "#t200"). val();

                                                var value = $( "#t201"). val();

                                                 $.cookie (key ,value );
                                                

                                      });

 

---

如上图代码所示，cookie中已经存入  

 

 

 

 

tip：

浏览器必须将cookie设置为保存，通过浏览器的设置，查看cookie中可以看到已经存入  key为jack，value为rose的值

同时浏览器也不要开启退出浏览器自动清除cookie的功能，否则可能影响测试效果

 

可以看到，当前的cookie的过期时间是在会话结束时，也就是说，页面关闭，cookie则不再了，浏览器关闭后，重新打开，查看cookie时

 

 

 

那么如何创建持久 cookie

 

$.cookie('the_cookie', 'the_value', { expires: 7 } );

即在方法$.cookie (  key,  value,  cookie 的有效时间 ) 

 

 cookie 的有效时间:值可以是一个 数字 （从创建 cookie 时算起，以天为单位）或一个 Date  对

象 。如果省略，那么创建的 cookie 是会话 cookie，将在用户退出浏览器时被删除。

 

 

创建cookie，设置有效时间为 7 天

 

---

请输入cookie的KEY2: <input type= "text" id="t203" />

请输入cookie的value2:<input type="text" id="t204" />< br />

 

 

<input type="button" value="设定cookie(指定周期)" id="b201" />

 

$( "#b201").click( function(){

                                                             var key = $("#t203").val();

                                                             var value = $( "#t204"). val();

                                                             $.cookie (key ,value  ,   {  expires: 7    }    );

                                                    });

 

 

---

这时候查看浏览器的cookie

 

成功将cookie的有效时间设置成了7日后

 

 

---

 

 

读取 cookie：
$.cookie('the_cookie'); // cookie 存在 => 'the_value'

$.cookie('not_existing'); // cookie 不存在 => null

 

 

 

---

<div class="div4" >
            请输入要读取的cookie的KEY: <input type= "text" id="t205" />
     <input type="button" value="取得cookie" id="b202" />

</div>

 

   

        $( function(){
                         $("#b202").click( function(){
                                                                                                var key = $("#t205"). val();
                                                                                                 var value = $. cookie( key);
                                                                                                 alert( "key为 "+ key+ " 的cookie值是: " +value );
                                                                                      });

            })

 

---

 

删除cookie

<script type="text/javascript" >
            $( function(){
                         $("#b203").click(function(){

                                                                                                            var key = $("#t206"). val();

                                                                                                           $.removeCookie (key );

                                                                                                  });
            })
</script>
<div class= "div1">
            请输入要删除的cookie的KEY: <input type= "text" id="t206" />
     <input type="button" value="取得cookie" id="b203" />

</div>

     

---