このところ立て続けに、
Webページ上に初回アクセスのみ動画を表示させたい、
Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、
など、初回アクセス時に処理・制限を変える要望があり、
「jquery.cookie.js」を使ってのクッキー処理にて
それらを制御するサンプルを作ってみたので、
メモ書き程度に紹介してみます。
今回のサンプルでは、
初回アクセス時のみページ上に「初回アクセスです。」の
メッセージテキストを表示するサンプルです。
jQuery Cookie First Access Control
まずは動作サンプルから。
下記のリンクをクリックして表示されるページは、
初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。
※リロードしてアクセスが2回目以降となるとテキストは非表示になります。
≫jQuery Cookie First Access Control【SAMPLE】
中の構成について、
まずHTMLから。
◆HTML <div id="first">初回アクセスです。</div> <p>jQueryでWebページに初回アクセスのみ<br /> 「初回アクセスです。」のテキストを表示するサンプルです。</p>
特にHTMLソース上での重要な項目はないのですが
初回アクセス時に表示する内容をHTML側に記載しておきます。
（今回はCSSは特別な指定は必要にならないので省きます。）
そして、「jquery.cookie.js」を使って
初回アクセスと２回目以降のアクセスでの
処理を変えるスクリプトは以下になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
if($.cookie("access")){
$('#first').css({display:'none'});
}
$(window).load(function(){
$.cookie("access",$('body').addClass('access'));
})
});
</script>
アクセスした際にbodyタグにクラス（class=”access”）を追加し、
「jquery.cookie.js」での処理にてクラス追加の内容をクッキーに保存します。
２回目以降のアクセス時には、クッキーが有るか・無いか、をみて
if文で処理している内容が実行されるようになっています。
このサンプルでは「bodyにクラスを追加する」という処理で判別していますが
クッキーに保存する判別内容はクラス追加でなくても、
どんな制限でも大丈夫だったりします。
初回アクセスかどうか、の判別はクッキー処理になるので
ユーザーがクッキーを削除したら元に戻ります。
併せて、クッキー処理をする際の注意点として
Google Chromeはローカルファイルではクッキーの保存を行わないので
Google Chromeでの動作確認はサーバアップしたデータで確認する必要があります。
サンプルの動作は少々強引なものだったりしますが、
Webページ構造上で、初回アクセスと2回目以降に
別々の処理をする必要があった際のご参考までに。。。