JCookie-基于JQuery的Cookie增强插件

来源：互联网发布：js如何让按钮消失编辑：程序博客网时间：2024/05/21 17:57

http://hi.baidu.com/%C4%CC%B2%E8%CB%C0%B5%D0/blog/item/124c13d62658462807088b93.html

JQuery中的cookie 插件，太过于简单，只是对cookie做一个简单的封装，在实际应用中还需要做大量的工作。所以一直想做一个增强型的cookie插件，更方便使用。

从需求的角度讲，在电子商务应用当中，cookie的灵活应用对于用户体验非常重要，可以记忆用户的经常重复性的操作，个人偏好，等等。可惜很多的应用，并不擅长使用cookie.经常是输入一大堆搜索查询条件、可选操作后，再回退、刷新、再次登录后没有了,还要重新输入，非常恼火。所以我觉得能够智能化的记住用户的常用操作，是非常体贴用户、让用户感动的事情。

从技术的角度讲，一个high-level的javascript cookie API应当能够：

1).保存一个复杂的javascript Object. 这个类实例里可以包含基本类型、类成员变量等。

2).保存一个复杂的DOM节点的状态

如：保存一个表单中各种控件的状态，如输入框、下拉选择框、单选复选框

3).界面的布局和风格，如Portal中用户偏好的theme、窗口的大小、位置、个数等等。

4).用户经常性的操作结果，如排序等等。

我编写了一个增强型的基于Jquery的cookie插件JCookie(点此查看Demo>>), 暂时以解决在实际应用中的问题为主。

使用方法：

1.保存和恢复一个复杂的javascript 类实例。

var obj = new Object(); //你可以任意构造一个复杂成员变量的类实例。
var key = 'form_id';
$.cookie(key, obj);//保存一个实例
var obj = $.cookie(key); //恢复一个实例

2.保存和恢复一个表单中的字段值到cookie中

$('#formID').cookie(); //将Form表单中的字段值保存到cookie中
$('#formID').decookie(); //从cookie中恢复一个表单的数据

3.保存和恢复一个Sortable List的顺序到cookie中

$('#list3').cookie();//将list的各个item的顺序保存到cookie中
$('#list3').decookie();//从cookie中恢复一个list的各个item的顺序

sortable List 的HTML代码如下：

</p>
<ul id="list3">
    <li id="item-1">List Item 1</li>
    <li id="item-2">List Item 2</li>
    <li id="item-3">List Item 3</li>
    <li id="item-4">List Item 4</li>
    <li id="item-5">List Item 5</li>
    <li id="item-6">List Item 6</li>
</ul>
<p>

$('document').ready(function() {
    // here, we allow the user to sort the items
    $('#list3').sortable({
        axis: 'y',
        cursor: 'move',
        update: function() { $('#list3').cookie(); }
    });

// here, we reload the saved order
$('#list3').decookie();
});

$('document').ready(function() {
// here, we allow the user to sort the items
$('#list3').sortable({
   axis: 'y',
   cursor: 'move',
   update: function() { $('#list3').cookie(); }
});

// here, we reload the saved order
$('#list3').decookie();
});

==============================================

/**
* Cookie plugin
*
* Copyright www.ebiz163.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/

/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
*       used when the cookie was set.
*
* @param String name The name of the cookie.
* @param Object value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
*                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
*                             If set to null or omitted, the cookie will be a session cookie and will not be retained
*                             when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
*                        require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/

/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/

jQuery.cookie = function(key, value, options) {

if (typeof value != 'undefined') { // name and value given, set cookie
         options = options || {};
   if (value === null) {
            value = '';
            options.expires = -1;
        }else
    value = encodeValue(value);

}else {
var cookies = {};
var c = document.cookie + ";";

   var re = //s?(.*?)=(.*?);/g;
   var matches;
   while ((matches = re.exec(c)) != null) {
    var name = matches[1];
    var value = matches[2];
    if (name == key) {
     return decodeValue(value);
    }
   }
   return null;
}

/** -----------------------private-------------------------------------- function */

}

}

jQuery.fn.decookie = function(){
var tag = $(this).attr("tagName");
switch (tag)
{
case 'FORM' :
     $(this).decookieForm();
     break;
case 'UL':
        $(this).decookieOrder();
     break;
default:
   alert('不支持此DOM的cookie操作');
     break;
}

}

jQuery.fn.cookie = function(){
var tag = $(this).attr("tagName");
switch (tag)
{
case 'FORM' :
     $(this).cookieForm();
     break;
case 'UL':
        $(this).cookieOrder();
     break;
default:
   alert('不支持此DOM的cookie操作');
     break;
}
}

/**
* 从cookie中还原Form
*/
jQuery.fn.decookieForm = function(){
if($(this).attr("tagName") != 'FORM'){
alert('此方法只支持form的cookie操作');
return;
}

var object

var formName = $(this).attr("name");

cookies = jQuery.cookie(formName);

if(!cookies || cookies.length <= 0)
return;

$('input, textarea, select,', this).each(function() {
var elementID = this.id;

   var type = this.type;

   disabled = this.disabled;

   val = cookies[elementID] || "";

   if (!disabled) {
    switch (type) {
     case 'textarea':
     case 'text' :
      this.value = val;
      break;
     case 'select-one' :
     case 'select-multiple' :
      $(this).select(val);
      break;
     case 'radio' :
     case 'checkbox' :
      this.checked = !!val;
      break;
     default :
      break;
    }
   }
});

}

/**
* 保存Form的各个Field值到cookie中
*/
jQuery.fn.cookieForm = function(){
if($(this).attr("tagName") != 'FORM'){
alert('此方法只支持form的cookie操作');
return;
}

var formName = $(this).attr("name");
var formObj = {};
$('input, textarea, select,', this).each(function() {
var type = this.type;

   if (this.tagName == 'INPUT'&& type != 'text' && type != 'radio' && type != 'checkbox')
   {
    return;
   }

   var value = this.value;

   if(type == 'select-multiple'){
    value = $(this).select();
   }

   var elementID = this.id;

   if (!elementID) {
    alert("this element didn't have ID, could not be cookied,name:"
     + name);
    return;
   }

   if ((type == 'radio' || type == 'checkbox') && !this.checked){
     value = '';
   }

   formObj[this.id] = value;
});

jQuery.cookie(formName, formObj);

}

/**
* 如果不输入values参数，函数返回下拉框的单选或多选的值
* 如果输入values参数, 则用values选中下拉框中符合的值
*/
jQuery.fn.select = function(values) {

if(!values){
    values = [];
    jQuery('option:selected', this).each(function(){
         values.push(this.value);
    });

return values;
}

if (!(values instanceof Array)) {
values = [values];
}

jQuery('option', this).each(function(){
this.selected = false;

   if (jQuery.inArray(this.value, values) >= 0 ){
    this.selected = true;
   }
});
}

/**
* 将list的顺序记录到cookie中
*/
jQuery.fn.cookieOrder = function() {
// save custom order to cookie
var key = $(this).attr("id");
$.cookie(key, $(this).sortable("toArray"));
}

/**
* 从cookie中恢复list的顺序
*/
jQuery.fn.decookieOrder = function() {
var list = $(this);
if (list == null) return

// fetch the cookie value (saved order)
var key = $(this).attr("id");

var IDs = $.cookie(key);

if (!IDs) return;
//IDs = IDs.split(",");

// fetch current order
var items = list.sortable("toArray");

// make array from current order
var rebuild = new Array();
for ( var v=0, len=items.length; v<len; v++ ){
rebuild[items[v]] = items[v];
}

for (var i = 0, n = IDs.length; i < n; i++) {

   // item id from saved order
   var itemID = IDs[i];

   if (itemID in rebuild) {

    // select item id from current order
    var item = rebuild[itemID];

    // select the item according to current order
    var child = $("ul.ui-sortable").children("#" + item);

    // select the item according to the saved order
    var savedOrd = $("ul.ui-sortable").children("#" + itemID);

    // remove all the items
    child.remove();

    // add the items in turn according to saved order
    // we need to filter here since the "ui-sortable"
    // class is applied to all ul elements and we
    // only want the very first! You can modify this
    // to support multiple lists - not tested!
    $("ul.ui-sortable").filter(":first").append(savedOrd);
   }
}
}