IT虾米网

网页换肤基本原理详解

admin 2018年05月30日 编程语言 137 0

 网页换肤的基本原理

  使用 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({}); 
});

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

python对json的操作总结(一)详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。