お仕事で、
「クッキーを使って、一度でもログインしたことのあるユーザーには、トップページに特定の画像を見せたい」

という依頼があった。

cookieの操作は、やったことがなかったのだけど、まぁなんとかなるだろ、と引き受けて、なんとかなりました。最低限cookieでdivを見せたり非表示にしたりするためのことを書いておくね。


■cookieの構造

 cookieは、最低限では
・箱の名前
・箱の中身
・有効期限

でできている。

aiueo という箱の中身に 1111を入れておく、有効期限がくるまで。みたいな感じね。


■cookieの保存
クッキーを食べさせるとも言うね(ほんとに?)
javascriptで一文でOK

<script>
document.cookie = "aiueo=1111; Tue, 31-Dec-2030 23:59:59;"
</script>

aiueoという箱に1111を保存する。
有効期限は2030年の年末まで!

ということ。これでユーザーがブラウザのクッキーを消さない限り、2030年までは残り続ける。

怖い子。。



■cookieを読んで条件分岐する。

ここはなんだか面倒だったのでjqueryを使った。

jquery.cookie.js というのを使う。

ここで手に入れた


もちろんjquery.js本体も忘れずにね。


それらを読み込ませる。

んで、こんな感じ。

<script src="js/jquery.cookie.js"></script>
<script>
$(function(){
cookiename = $.cookie("aiueo");
if(cookiename == "1111"){
$('#box1').css({display:'none'});
$('#box2').css({display:'block'});
};
});
</script>

①cookienameという変数に cookieに保存してあるaiueoという箱の中身を入れるよ。
②それが1111だったら次のを発動!
③id="box1"を消して、代わりにbox2を表示!

こうすることで、cookieを使って別のものを見せられる。


■cookieの削除

訪問者のブラウザに保存されてしまったcookieを削除したいときはどうするのか。
なんと、cookieを削除する、ということはできないらしいんだ。

cookieを削除はできないので、代わりに
「有効期限を過去にする」ということをやる。

そうすることで、期限切れにして、削除されたのと同じことにするってーわけさ。


やり方はこれ、

<script>
var date1 = new Date();
date1.setTime(0);
document.cookie = "aiueo=;"+date1.toGMTString();
</script>

 
ちょっと時間がないので、解説はあとで。

とにかくこれで、cookieのaiueoは期限切れになる(削除されたことになる)よ!