课程推荐:Java开发工程师--学习猿地--送7个上线商业项目
继上一篇文章中我们讲到cookie的概念,今天我们来写如何用js来设置cookie、读取cookie、删除cookie。本文代码来自网络,并附上网页常见的使用cookie换肤案例供学习。
设置cookie
function setCookie(name, value,days) {
//三个参数,一个是cookie的名子,一个是值,最后一个是天数
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + days 24 60 60 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
读取cookie
function getCookie(name) {
//取cookies函数
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null)
return unescape(arr[2]);
return null;
}
删除cookie
function delCookie(name){
//删除cookie并重新演示
// 该函数检查下cookie是否设置,如果设置了则将过期时间调到过去的时间;
//剩下就交给操作系统适当时间清理cookie啦
if (getCookie(name))
{
document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
使用cookie换肤
除了添加上面的代码外,下面的这个是换肤系统的关键代码
var themes = {
'gray' : 'tpl/gray.css',
'black' : 'tpl/black.css',
'bootstrap' : 'tpl/bootstrap.css',
'default' : 'tpl/default.css',
'metro' : 'tpl/metro.css'
};
var skins = $('.li-skinitem span').click(function() { var $this = $(this); if($this.hasClass('cs-skin-on')) return; skins.removeClass('cs-skin-on'); $this.addClass('cs-skin-on'); var skin = $this.attr('rel'); $('#swicth-style').attr('href', themes[skin]); setCookie('cs-skin', skin); skin == 'dark-hive' ? $('.cs-north-logo').css('color', '#FFFFFF') : $('.cs-north-logo').css('color', '#000000'); }); if(getCookie('cs-skin')) { var skin = getCookie('cs-skin'); $('#swicth-style').attr('href', themes[skin]); $this = $('.li-skinitem span[rel='+skin+']'); $this.addClass('cs-skin-on'); skin == 'dark-hive' ? $('.cs-north-logo').css('color', '#FFFFFF') : $('.cs-north-logo').css('color', '#000000'); }
我把前端工具箱改了一下,支持换肤了。不过皮肤的细节css还需要完善。 前端开发工具 2013-8-21更新 在网上找到一段说是更简单的代码,先贴上来,有时间再研究
注意:cookie在本地的静态页面上chrome和Internet explorer没有效果,可以在火狐上调试,然后再放到服务器上测试。
© 著作权归作者所有
发表评论