お仕事で、
「クッキーを使って、一度でもログインしたことのあるユーザーには、トップページに特定の画像を見せたい」
という依頼があった。
cookieの操作は、やったことがなかったのだけど、まぁなんとかなるだろ、と引き受けて、なんとかなりました。最低限cookieでdivを見せたり非表示にしたりするためのことを書いておくね。
■cookieの構造
cookieは、最低限では
・箱の名前
・箱の中身
・有効期限
でできている。
aiueo という箱の中身に 1111を入れておく、有効期限がくるまで。みたいな感じね。
■cookieの保存
クッキーを食べさせるとも言うね(ほんとに?)
javascriptで一文でOK
aiueoという箱に1111を保存する。
有効期限は2030年の年末まで!
ということ。これでユーザーがブラウザのクッキーを消さない限り、2030年までは残り続ける。
怖い子。。
■cookieを読んで条件分岐する。
ここはなんだか面倒だったのでjqueryを使った。
jquery.cookie.js というのを使う。
ここで手に入れた
もちろんjquery.js本体も忘れずにね。
それらを読み込ませる。
んで、こんな感じ。
①cookienameという変数に cookieに保存してあるaiueoという箱の中身を入れるよ。
②それが1111だったら次のを発動!
③id="box1"を消して、代わりにbox2を表示!
こうすることで、cookieを使って別のものを見せられる。
■cookieの削除
訪問者のブラウザに保存されてしまったcookieを削除したいときはどうするのか。
なんと、cookieを削除する、ということはできないらしいんだ。
cookieを削除はできないので、代わりに
「有効期限を過去にする」ということをやる。
そうすることで、期限切れにして、削除されたのと同じことにするってーわけさ。
やり方はこれ、
ちょっと時間がないので、解説はあとで。
とにかくこれで、cookieのaiueoは期限切れになる(削除されたことになる)よ!
「クッキーを使って、一度でもログインしたことのあるユーザーには、トップページに特定の画像を見せたい」
という依頼があった。
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は期限切れになる(削除されたことになる)よ!
$(function(){
cookiename = $.cookie("aiueo");
if(cookiename == "1111"){
$('#box1').css({display:'none'});
$('#box2').css({display:'block'});
};
});
</script>
に対応する本文部分は
<div class="box1">hoge1の内容</div>
<div class="box2">hoge2の内容</div>
という事でしょうか?