JavaScriptでクッキーを扱ったことがなかったのでメモ。

今回は、とあるお知らせボックスの表示・非表示を切り替える機能を作ってみた。

緩やかな仕様

1. 初回アクセス時は表示。
2. 「非表示」のチェックボックスをオンにすると、ブロックが非表示になる。（クッキーに保存）
3. 「非表示」のチェックボックスをオフにすると、ブロックが表示される。（クッキーに保存）
4. 二回目以降は、クッキーの情報を見て自動的に表示・非表示を判別。

とりあえずHTMLはこんな感じ

<script type="text/javascript">
onload = function(){check_cookie();};
</script>
<div id="notice" style="border: 1px solid #999999; width: 200px; height: 150px; background-color: #0000ff; color: #ffffff;">サンプルテキスト
サンプルテキスト</div>
<div id="close_notice">
<form name="check">
  <input id="notice2" onclick="show_notice();" type="checkbox" name="notice" />
  <label for="notice2">非表示にする</label>
</form>
</div>

javascriptはこんな感じ。

function show_notice(){
var form_obj = document.check;
var label = form_obj.lastChild.innerHTML;
var myDate = new Date();

if(document.check.notice.checked){
document.getElementById('notice').style.display = 'none';
if(document.cookie.indexOf('name=hide_guide') == '-1'){
myDate.setTime(myDate.getTime()+(7*24*60*60*1000));
var exp = myDate.toGMTString();
document.cookie = 'name=hide_guide,expires='+exp;
}
}else{
myDate.setYear(myDate.getYear() -1);
document.cookie = "name=hide_guide;expires=" + myDate.toGMTString();
document.getElementById('notice').style.display = 'block';
}
}

function check_cookie(){
if(document.cookie.indexOf('name=hide_guide') != '-1'){
document.getElementById('notice').style.display = 'none';
document.check.firstChild.checked = true;
}

}

続きを読む →