このところ立て続けに、
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」を使って
初回アクセスと2回目以降のアクセスでの
処理を変えるスクリプトは以下になります。

◆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」での処理にてクラス追加の内容をクッキーに保存します。
2回目以降のアクセス時には、クッキーが有るか・無いか、をみて
if文で処理している内容が実行されるようになっています。

このサンプルでは「bodyにクラスを追加する」という処理で判別していますが
クッキーに保存する判別内容はクラス追加でなくても、
どんな制限でも大丈夫だったりします。

初回アクセスかどうか、の判別はクッキー処理になるので
ユーザーがクッキーを削除したら元に戻ります。

併せて、クッキー処理をする際の注意点として
Google Chromeはローカルファイルではクッキーの保存を行わないので
Google Chromeでの動作確認はサーバアップしたデータで確認する必要があります。

サンプルの動作は少々強引なものだったりしますが、
Webページ構造上で、初回アクセスと2回目以降に
別々の処理をする必要があった際のご参考までに。。。

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (6)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR