2011-01-21

JavaScript : Cookie でボタンの表示/非表示を制御したい

 
Cookie でボタンの表示/非表示を制御したい
  • Ex. 10 日以内に押下したボタンは表示しない



とか、まったくそんな気はなかったのだけれども、メモ。
ブラウザ依存の制御ってどこまで許容されるのだろかとかいつも思う。



○ 10 日以内に押下したボタンは表示しない

<html>
<head>
<script type="text/javascript" language="javascript">
<!--
var ar = new Array('a','b','c','d','e','f','g','h');

function isCookie(key){
    key += '=';
    s=document.cookie.indexOf(key);
    if(s != -1){
        return true;
    }
    return false;
}
function setCookie(key){
    if(key != null){
        var d = new Date();
        d.setDate(d.getDate() + 10);
        document.cookie = key + "=" + escape('true') + ";expires=" + d.toGMTString();
        return true;
    }
    return false;
}
function clearCookie() {
    for(i=0; i<ar.length; i++){
        if(isCookie(ar[i])){
            document.cookie = ar[i] + "=" + "xx; expires=Tue, 1-Jan-1980 00:00:00;";
        }
    }
}

function init(){
    for(i=0;i<ar.length;i++){
        if(isCookie(ar[i])){
            document.getElementById(ar[i]).style.display = 'none';
        }else{
            document.getElementById(ar[i]).style.display = '';
        }
    }
}
//-->
</script>
</head>
<body onload="init();">
<form>
<div id="a"><input type="button" style="width:80px;" onclick="javascript:setCookie('a');location.reload();" value="a" /></div>
<div id="b"><input type="button" style="width:80px;" onclick="javascript:setCookie('b');location.reload();" value="b" /></div>
<div id="c"><input type="button" style="width:80px;" onclick="javascript:setCookie('c');location.reload();" value="c" /></div>
<div id="d"><input type="button" style="width:80px;" onclick="javascript:setCookie('d');location.reload();" value="d" /></div>
<div id="e"><input type="button" style="width:80px;" onclick="javascript:setCookie('e');location.reload();" value="e" /></div>
<div id="f"><input type="button" style="width:80px;" onclick="javascript:setCookie('f');location.reload();" value="f" /></div>
<div id="g"><input type="button" style="width:80px;" onclick="javascript:setCookie('g');location.reload();" value="g" /></div>
<div id="h"><input type="button" style="width:80px;" onclick="javascript:setCookie('h');location.reload();" value="h" /></div>
<div id="z"><input type="button" style="width:80px;" onclick="javascript:clearCookie();location.reload();" value="clear" /></div>
</form>
</body>
</html>



◇ 確認環境

  • Google Chrom 8.0.552.237
  • IE 7.0.5730.13
 

0 件のコメント:

コメントを投稿