[锋利的jQuery-学习]网页换肤，使用cookies存储

最新推荐文章于 2021-07-05 12:22:52 发布

垲児

最新推荐文章于 2021-07-05 12:22:52 发布

阅读量759

点赞数

分类专栏： jQuery 文章标签： jquery cookies

本文链接：https://blog.csdn.net/u013204583/article/details/17399159

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初始化皮肤：

点击蓝色换肤框：

网页刷新后：

html源代码：

<body>
	<ul id="skin">
		<li id="skin_0" title="灰色" class="selected">灰色</li>
		<li id="skin_1" title="紫色">紫色</li>
		<li id="skin_2" title="红色">红色</li>
		<li id="skin_3" title="天蓝色">天蓝色</li>
		<li id="skin_4" title="橙色">橙色</li>
		<li id="skin_5" title="淡绿色">淡绿色</li>
	</ul>
	<div id="div_side_0">
		<div id="news">
			<h1 class="title">时事新闻</h1>
		</div>
	</div>
	<div id="div_side_1">
		<div id="game">
			<h1 class="title">娱乐新闻</h1>
		</div>
	</div>
</body>

jquery代码：

<script src="../scripts/jquery-1.8.0.js" type="text/javascript"></script>
<!--//引入jquery的cookie插件-->
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
	$("ul#skin li").click(function(){
		var index = $(this).attr("id");
		switch_skin(index);//每次点击换肤框就将新的皮肤样式写入cookie
	});
	var skinName = $.cookie("MyCssSkin");
	if(skinName){
		switch_skin(skinName);//如果cookie中保存有皮肤则加载保存的皮肤，如果点击换肤框则跳转到click时间更新
	}
 });
 function switch_skin(skinName){
	$("#"+skinName).addClass("selected").siblings().removeClass("selected");
	$("#cssfile").attr("href","css/"+skinName+".css");
	$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });//过期期限为10天
 }
</script>

测试的时候使用的是chrome，然后百度了一下chrome确实是不支持本地cookie的，online-cookie可以。

这不是我想要的效果，我更希望保存到服务器上，因为一旦用户删除cookie或者cookie的日期到期了，那么保存的皮肤就没有了、