JavaScript 保存和读取Cookie 缓存实现换肤且刷新不变

<link href="" rel="stylesheet" type="text/css" id="skinColour" />

<input type="button" value="黑蓝色" style="cursor:pointer" onclick="changeSyle('heilan');" />
<input type="button" value="白蓝色" style="cursor:pointer" onclick="changeSyle('baihei');" />
<input type="button" value="黑白色" style="cursor:pointer" onclick="changeSyle('heibai');" />
<input type="button" value="青白色" style="cursor:pointer" onclick="changeSyle('qingbai');" />
<input type="button" value="紫白色" style="cursor:pointer" onclick="changeSyle('zibai');" />
<input type="button" value="红白色" style="cursor:pointer" onclick="changeSyle('hongbai');" />
<input type="button" value="蓝白色" style="cursor:pointer" onclick="changeSyle('lanbai');" />

<script>
//把引入皮肤css路径<link>标签选出来
var cssStyle = document.getElementById('skinColour');
//换肤函数

//name传参换肤的css的名称

function changeSyle(name) {
event.stopPropagation();

//获取换肤css的地址
cssStyle.href = "/templets/biaoqian/wiki/" + name + ".css";
//保存肤色名
setStorage("skinName", name);
}
//html5设置本地存储
function setStorage(sname, vul) {
window.localStorage.setItem(sname, vul);
}
function getStorage(attr) {
var str = window.localStorage.getItem(attr);
return str;
}
//访问本地存储，获取皮肤名
var cssName = getStorage("skinName");
//判断是否有皮肤名，就使用获取的皮肤名，没有就用默认的
if (cssName && cssName != null) {
cssStyle.href = "/templets/biaoqian/wiki/" + cssName + ".css";

}else{
//没有皮肤就使用默认的皮肤路径
cssStyle.href = "/templets/biaoqian/wiki/heilan.css";
}
</script>