实现一个简单的jquery cookie 插件

在前端开发过程中，页面cookie的使用频率应该是很高的，为了对常用的这些工具组件做个整理，昨天写了一个简单的cookie插件

js 代码如下：

 1 ;(function($,document,undefined){
 2     var defaults= {
 3         path : "/",
 4         secure:""
 5     };
 6     $.cookie = function(key,value,options){
 7 //write cookie
 8         if(value !== undefined){
 9             options = $.extend({},defaults, options);
10             if(value === null){
11                 options.expires = -1;
12             }
13             if(typeof options.expires === 'number'){
14                 var days = options.expires,
15                     t = options.expires = new Date();
16                 t.setDate(t.getDate() + days);
17             }
18             return (document.cookie = [encodeURIComponent(key),'=',encodeURIComponent(value),
19                 options.expires ? '; expires='+options.expires.toUTCString():'',
20                 options.path ? '; path='+options.path : '',
21                 options.domain ? '; domain='+options.domain : '',
22                 options.secure ? '; secure' : ''
23             ].join(''));
24         }
25 // read cookie
26         var cookies = document.cookie.split('; ');
27         for(var i = 0,len = cookies.length; i < len; i++){
28             var parts = cookies[i].split('='),
29                 name = decodeURIComponent(parts.shift()),
30                 cookie = decodeURIComponent(parts);
31             if(name === key){
32                 return cookie;
33             }
34         }
35     };
36     $.removeCookie = function(key,options){
37         if($.cookie(key) !== null){
38             $.cookie(key,null,options);
39             return true;
40         }
41         return false;
42     }
43 })(jQuery,document);

测试代码如下：

html 代码：

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>cookie test</title>
 6     <script type="text/javascript" src="../jquery.js"></script>
 7     <script type="text/javascript" src="cookie.jquery.js"></script>
 8 </head>
 9 <body>
10     <div>
11         <p><label>cookie name:</label><input type="text" id="cookie_name" /></p>
12         <p><label>cookie value:</label><input type="text" id="cookie_value" /></p>
13         <div><label style="vertical-align:top;">all cookie：</label><textarea id="res" cols="30" rows="10"></textarea></div>
14         <p>
15             <button id="add">添加cookie</button>
16             <button id="del">删除cookie</button>
17             <button id="view">查询cookie</button>
18         </p>
19     </div>
20 </body>
21 </html>

测试用的javascript代码如下：

 1 $(function(){
 2             $('#res').val(document.cookie);
 3             $('#add').click(function(){
 4                 var c_name = $('#cookie_name').val(),
 5                     c_value = $('#cookie_value').val();
 6                 $.cookie(c_name,c_value,{});
 7             });
 8             $('#del').click(function(){
 9                 var c_name = $('#cookie_name').val();
10                 $.removeCookie(c_name,{});
11             });
12             $('#view').click(function(){
13                 var c_name = $('#cookie_name').val();
14                 $('#cookie_value').val($.cookie(c_name));
15             });
16 });

通过简单的测试，插件能正确的设置和读取cookie值。

 

posted @ 2013-09-06 11:27  嘻哈披头士  阅读(157)  评论(0)    收藏  举报