jquery.cookie中的操作之与换肤

jquery.cookie.js的插件，插件的源代码如下：

/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * 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 String 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(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

Cookie插件的操作

创建一个会话cookie：

$.cookie(‘cookieName’,'cookieValue’);

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

创建一个持久cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7｝);

注：当指明时间时，故称为持久cookie，并且有效时间为天。

创建一个持久并带有效路径的cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'｝);

注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。

创建一个持久并带有效路径和域名的cookie：

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'，domain: ‘chuhoo.com’，secure: false，raw:false｝);

注：domain：创建cookie所在网页所拥有的域名；secure：默认是false，如果为true，cookie的传输协议需为https；raw：默认为false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭这个功能，请设置为true。

获取cookie：

$.cookie(‘cookieName’);   //如果存在则返回cookieValue，否则返回null。

删除cookie：

$.cookie(‘cookieName’,null);

或者这样也能删除： $.cookie('cookieName', '', { expires: -1, path: '/' }); // 删除 cookie 

注：如果想删除一个带有效路径的cookie，如下：$.cookie(‘cookieName’,null,{path:’/'});

来演示一个换肤的粟子：

代码之div+css

<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />

<!--头部开始-->
<div id="header">
    <a id="logo" href="#">Jane Shopping</a>
    <ul id="skin">
        <li id="skin_0" title="蓝色" class="selected">蓝色</li>
        <li id="skin_1" title="紫色">紫色</li>
        <li id="skin_2" title="红色">红色</li>
        <li id="skin_3" title="天蓝色">天蓝色</li>
        <li id="skin_4" title="橙色">橙色</li>
        <li id="skin_5" title="淡绿色">淡绿色</li>
    </ul>

</div>
<!--头部结束-->

/*切换皮肤样式*/
#skin { 
    float:right; 
    margin:10px; 
    padding:4px; 
    120px; 
    list-style:none; 
    border: 1px solid #CCCCCC; 
    background:#FFF;
}
#skin li { 
    float:left; 
    margin-right:4px; 
    15px; 
    height:15px; 
    text-indent:-9999px; 
    overflow:hidden; 
    display:block; 
    cursor:pointer; 
    background-image:url(../images/theme.gif); 
}
#skin_0 { background-position:0px 0px; }
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1.selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

不同皮肤的css文件都放在styles/skins 文件夹下，命名如下：

代码之jQuery代码

版本一：

        $(function(){
            var $li =$("#skin li");
            $li.click(function(){
                $("#"+this.id).addClass("selected")                //当前<li>元素选中
                            .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
                $("#cssfile").attr("href","styles/skin/"+ (this.id) +".css"); //设置不同皮肤
                $.cookie( "MyCssSkin" ,  this.id , { path: '/', expires: 10 });
            });
            var cookie_skin = $.cookie( "MyCssSkin");//将MyCssSkin这个cookie值this.id赋给变量cookie_skin
　　　　　　　　if (cookie_skin) {
                    $("#"+cookie_skin).addClass("selected")                //当前<li>元素选中
                                      .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
                    $("#cssfile").attr("href","styles/skin/"+ cookie_skin +".css"); //设置不同皮肤
                    $.cookie( "MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });
            }
        })

版本一不好的地方，就是有大量的重复代码，可以模块化，函数化，来看版本二：

//网站换肤
$(function(){
        var $li =$("#skin li");
        $li.click(function(){
            switchSkin( this.id );
        });
        var cookie_skin = $.cookie("MyCssSkin");
        if (cookie_skin) {
            switchSkin( cookie_skin );
        }
});

function switchSkin(skinName){
        $("#"+skinName).addClass("selected")                //当前<li>元素选中
                       .siblings().removeClass("selected");  //去掉其他同辈<li>元素的选中
        $("#cssfile").attr("href","styles/skin/"+ skinName +".css"); //设置不同皮肤
        $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
}

下面代码也是换肤的例子

html:

    <script>
        //加载皮肤文件
        loadCss(_skinId,'Main.css'); 
    </script>

    <div style="right:10px; top: 5px; position: absolute; height: 21px; text-align:right">
        <a>皮肤：</a><a href="#" onclick="loadSkin('1')">藤蔓绿</a>&nbsp;<a href="#" onclick="loadSkin('2')">经典蓝</a>&nbsp;<a href="#" onclick="loadSkin('3')">甜蜜橙</a>&nbsp;<a href="#" onclick="loadSkin('4')">淡雅灰</a>
    </div>

皮肤路径 ：

js代码：

var _skinId = getCookie("_skinId") ? getCookie("_skinId"):"1";

function loadSkin(skinId)
{
    writeCookie("_skinId",skinId);
    top.window.location.reload();
}

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

function loadCss(skinId,cssName)
{
    var head = document.getElementsByTagName('head').item(0);
    css = document.createElement('link');
    css.href = "Skin/Skin" + skinId + "/"+cssName;
    css.rel = 'stylesheet';
    css.type = 'text/css';
    css.id = 'loadCss';
    head.appendChild(css);
}

function loadJs(file)
{
    var scriptTag = document.getElementById('loadScript');
    var head = document.getElementsByTagName('head').item(0);
    if(scriptTag) head.removeChild(scriptTag);
    script = document.createElement('script');
    script.src = "../js/mi_"+file+".js";
    script.type = 'text/javascript';
    script.id = 'loadScript';
    head.appendChild(script);
}

function setCookie(sKey, sValue, sDomain, sPath, sExpires, blSecure)
{
    var sCookieStr = sKey + "=" + sValue + ";";

    if (sDomain)    sCookieStr += " DOMAIN=" + sDomain + ";";
    if (sPath)        sCookieStr += " PATH=" + sPath + ";";
    if (sExpires)    sCookieStr += " EXPIRES=" + sExpires + ";";
    if (blSecure)    sCookieStr += " SECURE";
    
    document.cookie = sCookieStr;
}

function writeCookie(key,value)
{
    var sExpires=new Date();
    sExpires.setTime(sExpires.getTime()+24*60*60*1000*365);
    setCookie(key,value,"","",sExpires.toGMTString(),""); 
    if(getCookie(key) == null)
    {
        alert("您的浏览器安全设置过高,不支持Cookie,请重新设置浏览器的。");
    }
}
    
function getCookie(sKey)
{
    var sCookie = document.cookie;
    if( !sCookie ) return null;
    
    var sTag = sKey + "=";
        
    var iBegin = sCookie.indexOf(sTag);
    if (iBegin < 0)    return null;
    
    iBegin += sTag.length;
    
    var iEnd = sCookie.indexOf(";", iBegin);
    if (iEnd < 0)    iEnd = sCookie.length;
    
    return sCookie.substring(iBegin, iEnd);
}

function delCookie(sKey) 
{
    var tNow = new Date();
    setCookie(sKey, "", null, null, tNow.toGMTString(), null);
}