JS實現網頁換膚功能效果

龍恩0707發表於2013-12-25
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({});
});
View Code

 DEMO下載

相關文章