网上也有很多讲解web整站换肤的例子，但是这些例子大多数讲解的很模糊，不清楚，大家通常很难理解，今天我将给大家带来一个全新的例子，这个例子基于jquery和html5的localstorage本地存贮功能来实现的，并不像大多数例子那样采用cookies来存贮，localstorage是HTML5的新功能，新东西就要敢于去使用它，localstorage比cookies存贮性能更好，因为是存贮在本地，所以不会因为浏览器清理缓存而被清理掉，所以几乎可完美媲美写入后台数据库实现的那种换肤。好了不废话了，开始吃瓜！
大概思路就是同一个网站 写多个css文件，通过切换css文件来达到替换网站样式风格，但是这样一刷新就失效了，所以引用了localstorage来存贮我们设置好的样式路径，通过js设置css文件标签的href属性来换肤。
首先了解一下.localStorage本身带有方法：
添加键值对：localStorage.setItem(key,value)
获取键值：localStorage.getItem(key)
删除键值对：localStorage.removeItem(key)。
清除所有键值对：localStorage.clear()。
我们再看一下例子 结构：
这里可以清楚的看到整个例子由哪些文件组成，用的都是最常见的bootstrap 框架和jquery（用不用其实都无所，这里为了方便和美观 习惯性加上而已），
style1-4代表了四种不同的主题文件，整个网站由index1-4这四个页面组成，
themes.js是创建和设置主题的js文件，也是主讲的核心内容。
我们来看一下index1里的内容：
网站LOGO
页面一
页面二
页面三
页面四
这是页面一
index2 index3 index4和这个里面的内容一样，引用的头部文件也相同。
我们再来看一下style1.css里的文件样式：
demo{
background-color: #00CCFF;
border-radius: 35px;
box-shadow: 10px 10px 10px #737373;
}
.navbar-default{
background-color: #00CCFF;
}
另外几个style2-4里和style1里只有背景色不同以方便运行查看样式的更改。
我们接下来看一下themes.js里的内容：
$(document).ready(function(){
//新建变量a获取本地存贮的localStorage中的a
var a = localStorage.getItem('a');
//判断localStorage是否存在
if(a==null&&a==undefined){
//如果不存在 将默认样式设置为样式一
$('.test').attr('href', 'css/style1.css');
}
else{
//如果存在 将样式设置为a的样式
$('.test').attr('href', a)
}
$("#submit").click(function(){
//创建localStorage对象
var storage=window.localStorage;
var color=$(":selected").val();
if(color=='样式一'){
//把路径存到localStorage对象的a中;
storage.a="css/style1.css";
$('.test').attr('href',storage.a);
alert('你已经成功设置了样式一');
}
else if(color=='样式二'){
//把路径存到localStorage对象的a中;
storage.a="css/style2.css";
$('.test').attr('href',storage.a);
alert('你已经成功设置了样式二');
}
else if(color=='样式三'){
//把路径存到localStorage对象的a中;
storage.a="css/style3.css";
$('.test').attr('href',storage.a);
alert('你已经成功设置了样式三');
}
else if(color=='样式四'){
//把路径存到localStorage对象的a中;
storage.a="css/style4.css";
$('.test').attr('href',storage.a);
alert('你已经成功设置了样式四');
}
else{
alert('发生错误！');
}
});
});
这里重点几乎都被我添加注释了，包括新建localstorage，定义变量来设置默认样式，以及一系列的逻辑判断，我个人觉得这段代码已经十分易于理解了，
如果你看了还是不懂，那么挥舞起你手里的鼠标，选中粘贴复制代码到你的本地中，参照案例亲自做一遍，既帮助你理解了网站换肤的实现，也理解了localstorage的使用！
如果自己运行有问题的，需要帮助的可以给我留言，也可以加我QQ索取项目源码（QQ1152314386）
运行效果图：
