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下載