このところ立て続けに、
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回目以降に
別々の処理をする必要があった際のご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから