JS实现网页换肤功能效果

 网页换肤的基本原理

  使用 JS 切换对应的 CSS 样式表。例如hao123首页的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。

  基本流程如下：

                            

   上面是使用流程图来描述下，自从工作以来很小画这样的流程图 如果流程图画错了或者画的不够好 请大家原谅！

   先来看看效果图吧！

  

  我只是做个demo 来实现这样一个效果！假如页面上一进来的时候 有这么四个按钮 分别代表不同的样式 当我鼠标点击不同的按钮时候 切换不同的css文件 且切换时候记录cookie里面去，当我们刷新页面或者关闭网页 重新打开 由于cookie的存在 所以还是关闭前的css样式 这样就实现了简单的网页换肤功能效果 基本的原理就是这些！

 了解cookie及HTML5中sessionStorage和localStorage

  首先我们来了解下cookie是干什么用的？简单讲 cookie作用是客户端存储数据。也就是本地存储。具体的了解可以看我之前的一篇关于cookie的博客。深入了解cookie

  讲到cookie，我们再来简单的来了解下HTML5中新增了2个本地存储sessionStorage和localStorage. sessionStorage、 localStorage、cookie都是在浏览器端存储的数据，   其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面， 数据仍然存在。 关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
Web  Storage 带来的好处： 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少 数据在浏览器和服务器间不必要地来回传递。 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用 sessionStorage非常方便。

 cookie sessionStorage及localStorage共同点及区别是什么？

 共同点：

   都是在浏览器端存储的数据，且同源的。

 区别：

     1. 存储大小不一样： cookie存储数据有限制 做多只能是4KB 而sessionStorage和localStorage可以存储5MB 甚至更多数据。

     2. cookie 数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。而sessionStorage和 localStorage不会自动把数据发给服务器，仅在本地保存。

     3. 数据有效期不同： sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持； localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据； cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

    4. 作用域不同， sessionStorage 不在 不同的浏览器窗口中共享，即使是同一个页面； localStorage 在所有同源窗口中都是共享的；cookie也是在 所有同源窗口中都是共享的。

 使用cookie碰到那些问题？

    首先来讲讲我在本地做demo 因为没有放到任何服务器下面 所以我直接放在桌面上 点击页面打开，突然发现 "谷歌游览器不支持cookie在本地存储"。所以针对这个问题在谷歌游览器下没有用cookie存储，而是用了上面介绍的HTML5中的localStorage作本地存储功能。通过setItem 设置key名 然后通过getItem获取key名 进而获取值。

HTML代码如下：

<p>前端开发是我的一个职业目标，我喜欢前端开发，热爱前端开发，喜欢制作各种各样的页面效果</p>
<input type="button" data-value="default" class="targetElem" value="default"/>
<input type="button" data-value="green" class="targetElem" value="green"/>
<input type="button" data-value="red" class="targetElem" value="red"/>
<input type="button" data-value="orange" class="targetElem" value="orange"/>

CSS代码

 default.css 代码如下：

@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#00C;}
p{color:#006;}

orange.css代码如下：

@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#C60;}
p{color:#C33;}

green.css代码如下：

@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#060;}
p{color:#060;}

red.css代码如下：

@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0;}
h2{color:#F00;}
p{color:#F00;}

JS代码如下：

/**
 * JS实现换肤功能
 */
// Google Chrome只支持在线网站的cookie的读写操作，对本地html的cookie操作是禁止的。
// name1=value1;name2=value2;name3=value3;name4=value4
 function Skin(options) {
 
    this.config = {
        targetElem                :  '.targetElem',
        link                      :  '#link'
    };
    this.cache = {
        defaultList        : ['default','green','red','orange']
    };

    this.init(options);
 }

 Skin.prototype = {
    
    constructor: Skin,
    init: function(options) {
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config;
        
        $(_config.targetElem).each(function(index,item) {
            
            $(item).unbind('click');
            $(item).bind('click',function(){
                var attr = $(this).attr('data-value');
                self._doSthing(attr);
            });
        });
        // 判断是否是谷歌游览器 谷歌游览器因为不支持cookie在本地上存储 所以引入了HTML5
        if(window.navigator.userAgent.indexOf("Chrome") !== -1) {
            var tempCookeie = self._loadStorage("skinName"),
                t;
            if(tempCookeie != "null") {
                t = tempCookeie;
            }else {
                t = 'default';
            }
            self._setSkin(t);

        }else {
            var tempCookeie = self._getCookie("skinName");
            self._setSkin(tempCookeie);
        }
        
    },
    /*
     * 进行判断 来设置css样式
     */
    _doSthing: function(attr) {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        if(window.navigator.userAgent.indexOf("Chrome") !== -1) {
            self._doStorage(attr);
            var istrue = localStorage.getItem(attr);
            self._setSkin(attr);
        }else {
            var istrue = self._getCookie(attr);
            if(istrue) {
                for(var i = 0; i < _cache.defaultList.length; i++) {
                    if(istrue == _cache.defaultList[i]) {
                        self._setSkin(_cache.defaultList[i]);
                    }
                }
            }
        }
        
    },
    /*
     * 改变样式
     */
    _setSkin: function(skinValue){
        
        var self = this,
            _config = self.config;
        
        if(skinValue) {
            $(_config.link).attr('href',"style/"+skinValue+".css");
        }
        if(window.navigator.userAgent.indexOf("Chrome") !== -1) {
            self._saveStorage(skinValue);
        }else {
            self._setCookie("skinName",skinValue,7);
        }
        
    },
    /*
     * 重新
     */
    _doStorage: function(attr) {
        var self = this;
        self._saveStorage(attr);
    },
    /*
     * html5获取本地存储
     */
    _loadStorage: function(attr) {
        var str = localStorage.getItem(attr);
        return str;
    },
    /*
     * HTML5本地存储 
     */
    _saveStorage:function(skinValue) {
        var self = this;
        localStorage.setItem("skinName",skinValue);
    },
    /*
     * getCookie
     */
    _getCookie: function(name) {
        var self = this,
            _config = self.config;
        var arr = document.cookie.split("; ");
        for(var i = 0; i < arr.length; i+=1) {
            var prefix = arr[i].split('=');
            if(prefix[0] == name) {
                return prefix[1];
            }
        }
        return name;
    },
    /*
     * _setCookie
     */
    _setCookie: function(name,value,days) {
        var self = this;

        if (days){
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }else {
            var expires = "";
        }
        document.cookie = name+"="+value+expires+"; path=/";
    },
    /*
     * removeCookie
     */
    _removeCookie: function(name) {
        var self = this;

        //调用_setCookie()函数,设置为1天过期,计算机自动删除过期cookie
        self._setCookie(name,1,1);
    }
 };

// 初始化
$(function(){
    new Skin({});
});
 

 DEMO下载