如何使用JavaScript cookie来记住DIV状态？

Question

我有一个测试网站here（还在开发中），我正在尝试让顶部的小通知在单击关闭后保持隐藏。

目前我的脚本是这样的：

<style type="text/css">
<!--
.hide {
display:none;
}
.show {
display:block;
}
-->
</style>
<script type="text/javascript">
<!--
var state;
window.onload=function() {
obj=document.getElementById('alert');
state=(state==null)?'show':state;
obj.className=state;

document.getElementById('close').onclick=function() {
obj.className=(obj.className=='show')?'hide':'show';
state=obj.className;
setCookie();
return false;
}
}

function setCookie() {
exp=new Date();
plusMonth=exp.getTime()+(31*24*60*60*1000);
exp.setTime(plusMonth);
document.cookie='State='+state+';expires='+exp.toGMTString();
}

function readCookie() {
if(document.cookie) {
state=document.cookie.split('State=')[1];
}
}
readCookie();
//-->
</script> 

然后：

<div id="alert" class="show" style="float: left; width: 100%;"><div style="width: 80%; text-align:left; float:left;">Sorry for the downtime, we were experiencing some problems with our web host. Everything should be back to normal now =D</div> 
<div style="width: 18%; text-align:right; float:left; padding-right: 20px;"><a href='#' id="close">close</a></div> </div>

但似乎它不起作用。有什么想法吗？

提前感谢！

Sam

- sm.

Answer 1

首先，你需要修复 readCookie 函数，你调用的 split 函数会返回 "State=" 后面的所有内容，并将其存储在返回数组的第一个偏移量中，因此请改为以下方式：

function readCookie() {
    if(document.cookie) {
        var tmp = document.cookie.split(';')[0];
        state = tmp.split('=')[1];
        alert(state);
    }
}

- karim79

---

哦，对不起 - 以为 Mage 先生已经回答了。已修复 =) - sm.

@sm - 你的问题被哪个答案解决了？你应该“打勾”选择最有帮助的那一个。如果它们都有帮助，你应该礼貌地投票支持它们 - 这是标准的 SO 礼仪。 - karim79

是的，抱歉 - 我还没有足够的声望（但我会努力的...） - sm.

Answer 2

对我来说，它可以工作（Firefox 3.5，Windows XP）。但是在网站加载完成之前，该div不会消失。您可能希望首先将div设置为style="hide"，并在页面加载后显示它。

- MrMage