jquery页面无刷新切换皮肤并保存

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS</title> 
    <link href="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/skin_0.css" rel='stylesheet' type='text/css' id="cssfile">
    <script id="jquery_180" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/cookie.js"></script>
    <style>
    .head{400px;}
    a{
        display:inline-block;
        20px;
        height:20px;
        cursor:pointer;
    }

    a.skin_0{
        background:red;
    }
    a.skin_1{
        background:green;
    }
    a.skin_2{
        background:orange;
    }
    a.skin_3{
        background:#666;
    }
    .content{
        500px;
        height:500px;
        margin-top:20px;
    }
    </style>
    
</head>
    <body>
        <div style="margin-bottom:20px;">
                    选择颜色，改变下面div的颜色，刷新依旧存在——————cookie的强大
          </div>
         <div class="head">
                    <a class="skin_0" id="skin_0" class="selected"></a>
                    <a class="skin_1" id="skin_1"></a>
                    <a class="skin_2" id="skin_2"></a>
                    <a class="skin_3" id="skin_3"></a>
            </div>
            <div class="content">
                
          </div>
    </body>
    <script type="text/javascript">
        function changeColor(skinName){
            $("#"+skinName).addClass('selected').siblings().removeClass('selected');
            $("#cssfile").attr('href','http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/'+skinName+'.css');
            $.cookie('mySkin',skinName,{path:'/',expires:10});
        }

        $(function(){
            var $a = $(".head a");
            $a.click(function(){
                    var skinName= this.id;
                    changeColor(skinName);
            })
            var cookieSkin = $.cookie('mySkin');
            if(cookieSkin){
                changeColor(cookieSkin);
            }


        })
    </script>
</html>

这儿技术点就是应用jquery插件cookie.js， $.cookie('mySkin',skinName,{path:'/',expires:10});这句话中，第一个参数是：cookie的名称，第二个参数是：cookie的值，第三个就是路径和保存时间。

而后面$.cookie('mySkin')是取将名称为mySkin的cookie值取出来。

而这个cookie.js的应用：

$.cookie('the_cookie'); // 获得cookie
$.cookie('the_cookie', 'the_value'); // 设置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期路径域名等

不过虽说插件好用，但是不免有时候也应该去研究研究原生的js的cookie代码。（一般来说，cookie是用来保存值用的。故而有时候需要统计页面访问次数，或者说“在一段时间里（比如5分钟），同一个人无论刷新了这个页面多少次都好，都只能算一次”）。