ブログでもだいたい使えるHTMLタグリファレンス

ホームページやブログなどのウェブサイトに簡単な JavaScript を使って閲覧者の訪問回数を表示することができます。ブラウザのクッキーにデータを保存したり、クッキーからデータを読み込んだりします。

閲覧者のブラウザの設定がクッキーを無効としている場合は、クッキーへの書込みは行えません。

クッキーには通常有効期限を設定します。これにより、「1日のみ有効なクッキー」とか、「1年間有効なクッキー」などの指定が可能ですが、保存できるクッキーの数やサイズはある程度限られており、これを超えた場合、有効期限にかかわらず古いものから削除されます。

有効期限の設定されていないクッキーは、ブラウザを閉じたときに消去されます。

1つのブラウザが保持できるクッキーの最大数は 300 で、なかでも同じドメインのページから書き込まれたものは 20 までです。また、1つのクッキーの最大サイズは 4 KB となっています。

クッキーデータの読み込みおよび書込みにかかわるメソッドは、下記のようになります。

document.cookie = クッキーに保存するデータ

クッキーに保存するデータ：クッキー設定時に、クッキーに保存するデータを指定します。

サンプルです。このサンプルでは、初めてページを開いたときに訪問者のハンドルネームをたずねるプロンプトウィンドウが開き、入力すれば、訪問者の名前付きで訪問回数を表示します。入力しなければ、『ゲストさん』になります。

このサンプルのソースは次のようになっています。

<SCRIPT LANGUAGE="JavaScript">
<!--

name  = getCookie( "NAME"  ) ;
times = getCookie( "TIMES" ) ;

if ( name == "" ) { 
	name = prompt( "よかったらハンドルネームを入力してください。","" ) ;
	if ( name == "" || name == "null" || name == null || name == "undefined" ) name = "ゲスト" ;
	}

times++ ;
( times == "1" )? timesmsg = "初めて" : timesmsg = times + "回目" ;
document.write( name , "さん " , timesmsg , "のご訪問ありがとう。<br>" ) ; 
setCookie( "NAME"  , name  ) ;
setCookie( "TIMES" , times ) ;

function setCookie( key , val ) { 
	myEXP = new Date() ;
	( key == "NAME" && val == "ゲスト" )? myGMT = 1 : myGMT = 365 ;
	myEXP.setTime( myEXP.getTime() + myGMT * 24*60*60*1000 ) ;
	mck  = key + "=" + escape( val ) + ";" ;
	mck += "expires=" + myEXP.toGMTString() + ";"　;
  	document.cookie = mck ;
	}

function getCookie( key ) {
        mck = document.cookie + ";" ;
	index1 = mck.indexOf( key , 0 ) ;
  	if ( index1 != -1 ) {
        	mck = mck.substring( index1 , mck.length ) ;
		index2 = mck.indexOf ( "=" , 0 ) + 1 ;
		index3 = mck.indexOf ( ";" , index2 )  ;
 		return( unescape( mck.substring( index2 , index3 ))) ; }
        return( "" ) ;
	}
//-->
</SCRIPT>

簡単に、ソースについて解説します。

name = getCookie( "NAME" ) ; times = getCookie( "TIMES" ) ;	...1
if ( name == "" ) { name = prompt( "よかったらハンドルネームを入力してください。","" ) ; if ( name == "" \|\| name == "null" \|\| name == null \|\| name == "undefined" ) name = "ゲスト" ; }	...2

NAME、TIMES をそれぞれ因数として、getCookie() という関数を呼び出し、戻り値をそれぞれ name、times という変数に代入します。クッキーを読み込む関数です。
name 代入された値が空だった場合（初回訪問時など）、プロンプトウィンドウを表示して、ハンドルネームの入力を促します。
入力結果が空だったり、プロンプトウィンドウがキャンセルされた場合には、name　は　『ゲスト』とします。

times++ ;	...3
( times == "1" )? timesmsg = "初めて" : timesmsg = times + "回目" ; document.write( name , "さん " , timesmsg , "のご訪問ありがとう。 " ) ;	...4
setCookie( "NAME" , name ) ; setCookie( "TIMES" , times ) ;	...5

訪問回数を格納する変数 times に 1 加えます。
times が 1 であれば、表示するメッセージの変数 timesmsg に "初めて"という言葉を、それ以外ならば ○回目、という文字列を代入し、訪問者へのメッセージを書き出します。

『△△さん、○回目のご訪問ありがとう。』
という表示になります。
文字列 NAME と変数 name を、また文字列 TIMES と変数 times を引数として、setCookie() という関数を呼び出します。クッキーを書き込む関数です。

function setCookie( key , val ) {	...6
myEXP = new Date() ;	...7
( key == "NAME" && val == "ゲスト" )? myGMT = 1 : myGMT = 365 ; myEXP.setTime( myEXP.getTime() + myGMT * 246060*1000 ) ;	...8
mck = key + "=" + escape( val ) + ";" ;	...9
mck += "expires=" + myEXP.toGMTString()　+ ";" ;	...10
document.cookie = mck ; }	...11

先ほど引数として関数に引き渡された文字列 NAME および TIME は　この関数ないで key という変数として扱われます。name および times といった変数は、val という変数として扱われます。
クッキーの有効期限を設定するため、new ステートメントで新しいオブジェクトを作成します。myEXP という名前にします。
.getTime() で現在の日時を取得します。これは、1970年1月1日午前0時からの経過時間をミリ秒を返すメソッドです。
この時間に、設定する有効期限の秒数（同じくミリ秒）を足した値を .setTime() メソッドで再び1970年1月1日午前0時からの経過時間として myEXP にセットします。
名前が、『ゲスト』の状態では、有効期限を 7*24*60*60*1000 ミリ秒として、24時間アクセスが空いたアドで再び訊きなおす設定にしています。それ以外では、クッキーの有効期限は 365*24*60*60*1000 ミリ秒、つまり1年になります。
クッキーに保存するためのデータを整形します。クッキーに保存するデータの形式は、
データ名1 = データ内容1 ; データ名2 = データ内容2...
というふうである必要があるため、= や ; をつなぎ合わせています。
保存するデータに日本語が含まれる場合は escape() で、文字コードに変換する必要があります。
前項のデータに、有効期限を追記します。有効期限を格納する変数 myEXP を、.toGMTString() メソッドでグリニッジ標準時に整えていますから、expires=Mon, 31 Dec 2001 23:59 :59 GMT;　というような形状になります。
最終的にクッキーに保存されるのは、このサンプルで言うと、
NAME=%83J%83G%83f;expires=Mon, 31 Dec 2001 23:59 :59 GMT;TIMES=7;expires=Mon, 31 Dec 2001 23:59 :59 GMT;
といったデータになります。これをクッキーに書き込んでいます。

function getCookie( key ) {	...12
mck = document.cookie + ";" ;	...13
index1 = mck.indexOf( key , 0 ) ;	...14
if ( index1 != -1 ) {	...15
mck = mck.substring( index1 , mck.length ) ;	...16
index2 = mck.indexOf ( "=" , 0 ) + 1 ;	...17
index3 = mck.indexOf ( ";" , index2 ) ;	...18
return( unescape( mck.substring( index2 , index3 ))) ; }	...19
return( "" ) ; }	...20

クッキーを読み込む関数です。引数として渡された NAME および TIMES の文字列は、この関数内で key という変数として扱われます。
mck という変数に、クッキーデータを代入します。末尾に ; を付けて整形します。
変数 mck (クッキーデータ) に、NAME および TIMES の文字列が含まれるかどうか、indexOf() を使って検索します。あれば、その先頭の位置が、なければ -1 という値が index1 という変数に代入されます。
index1 が -1 でない、つまり上記文字列を含んでいた場合、｛｝内の処理が実行されます。
変数 mck substring で切り出します。最初に key ( NAME や TIMES ) の各文字列のある位置以降を mck に代入します。
変数 index2 には、前項で切り出された文字列 mck のなかで、最初に　= が出現する位置が代入されます。
変数 index3 には、前項で切り出された文字列 mck のなかで、最初に　; が出現する位置が代入されます。
この index2 と index3 を使って、さらに文字列 mck を切り出します。 mck.substring( index2 , index3 ) は、= と　; で挟まれた間の文字列となります。
これを、再び unescape で文字コードから文字に変換して、この関数の戻り値とします。
前項15 で、false だった場合の戻り値は、""（空）になります。これは、初回訪問時など、クッキーデータが存在しない場合に該当します。

ランキングに参加中です! お役に立てたらクリックをお願いします→

ブログでもだいたい使えるHTMLタグ リファレンス

クッキーを使って訪問回数を表示する