JavaScript 的 Cookie 控制

这是当年看着书学习修改的代码，用来控制banner的显示与否。

原理：正常情况下显示 banner，当点击关闭按钮时，通过 turnoff(obj); 函数添加一条cookie: guide_status=guide_close ，并设置 CSS display 为 none。通过 readcookie(the_info); 函数读取 cookie ，判断 guide_status=guide_close 是否存在，存在即设置 CSS display 为 none。

函数:

turnoff(obj);
function turnoff(obj){
//设置cookie过期时间，这里设为2012发生日
var the_date=new Date("December 21, 2012");
var the_cookie_date=the_date.toUTCString();
//写入cookie+过期时间
document.cookie="guide_status=guide_close;expires="+the_cookie_date;
//隐藏banner
document.getElementById(obj).style.display="none";
}

该函数以 onclick 事件插入到关闭按钮中： onclick=”javascript:turnoff(‘guidebar’)” ，guidebar 为 banner ID。

readcookie(the_info)

function readcookie(the_info){
var the_cookie=document.cookie;
var the_cookie=unescape(the_cookie);
//通常浏览器存储的cookie都不止一条记录，因此要将cookie通过’;'拆分
var pair_cookie=the_cookie.split(";");
var property_value="";
//循环遍历pair_cookie数组
for(loop=0;loop<pair_cookie.length;loop++)
{
property_value=pair_cookie[loop];
//通常每一条cookie记录都有属性和值，用’='分隔，因此用’='拆分
var broken_info=property_value.split("=");
//又是数组，获取属性
var the_property=broken_info[0];
//获取属性值
var the_value=broken_info[1];
//属性对应属性值的数组
the_info[the_property]=the_value;
//判断是否存在guide_close的值，这里的判断并不严密，有可能存在a=guide_close而不是guide_status=guide_close，因此将值设为比较有标志性的guide_close，欢迎改良
if(the_info[the_property]=="guide_close"){
document.getElementById(‘guidebar’).style.display="none";
}
}
}

完整代码：

JS部分：

<script type="text/javascript">
function turnoff(obj){
var the_date=new Date("December 21, 2012");
var the_cookie_date=the_date.toUTCString();
document.cookie="guide_status=guide_close;expires="+the_cookie_date;
document.getElementById(obj).style.display="none";

}
function readcookie(the_info){
var the_cookie=document.cookie;
var the_cookie=unescape(the_cookie);
var pair_cookie=the_cookie.split(";");
var property_value="";
for(loop=0;loop<pair_cookie.length;loop++)
{
property_value=pair_cookie[loop];
var broken_info=property_value.split("=");
var the_property=broken_info[0];
var the_value=broken_info[1];
the_info[the_property]=the_value;
if(the_info[the_property]=="guide_close"){
document.getElementById(‘guidebar’).style.display="none";
}
}
}
//初始化cookie存储数组，估计可以写到HTML中
var cookie_information=new Array();
</script>

HTML部分：

<div id="guidebar">
<a href="#" onclick="javascript:turnoff(‘guidebar’)">关闭</a>
<script type="text/javascript">readcookie(cookie_information);</script>
</div>