网页换肤的基本原理
使用 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:;margin:;}
h2{color:#00C;}
p{color:#006;}
orange.css代码如下：
@charset "utf-8";
/* CSS Document */
*{padding:;margin:;}
h2{color:#C60;}
p{color:#C33;}
green.css代码如下：
@charset "utf-8";
/* CSS Document */
*{padding:;margin:;}
h2{color:#060;}
p{color:#060;}
red.css代码如下：
@charset "utf-8";
/* CSS Document */
*{padding:;margin:;}
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({});
});