|
今天我们来写如何用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
| 代码如下 |
复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js读取cookie测试</title>
<link href="css/08nzfh-style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body>
<div class="personality">
<script type="text/javascript">
//<![CDATA[
function setCookie(name,value)
{
var Days = 30; //此 cookie 将被保存 30 天
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();
}
function getCookie2(objName){//获取指定名称的cookie的值
var arrStr = document.cookie.split("; ");
for(var i = 0;i < arrStr.length;i ++){
var temp = arrStr<i>.split("=");
if(temp[0] == objName) return unescape(temp[1]);
}
}
var _b = false;
//setCookie("mycookie","mycookie");
if(typeof(getCookie2("mycookie2")) != 'undefined')
{
alert(typeof(getCookie2("mycookie2")));
_b = true;
}
alert(_b);
if(_b){
document.write('<iframe id="iframe_email" name="iframe_email" frameborder="0" scrolling="no" src="http://localhost:8008/vote1.4/test_8.jsp" height="100%" width="100%"></iframe>');
}else{
document.write('<iframe src="#" style="display:none;"></iframe> 请登录');
}
//]]>
</script>
</body>
</html>
|
使用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更新
在网上找到一段说是更简单的代码，先贴上来，有时间再研究
| 代码如下 |
复制代码 |
|
<script>
Cookie =
{
get: function (k) { return ((new RegExp(["(?:; )?", k, "=([^;]*);?"].join(""))).test(document.cookie) && RegExp["$1"]) || ""; },
set: function (k, v, e, d) { document.cookie = [k, "=", v, e && e["toGMTString"] ? ';expires=' + e.toGMTString() : "", ";path=/;domain=", d || ""].join(""); }
};
//写入Cookie
Cookie.set("UserID", "Hello hooyes");
//读取Cookie
var value = Cookie.get("UserID");
alert(value); // Hello hooyes!
</script>
|
|
