TOPページ >  ドキュメントおよびクッキー > クッキーを使って訪問回数を表示する

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

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

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

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

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

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

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

document.cookie = クッキーに保存するデータ
  • クッキーに保存するデータ:クッキー設定時に、クッキーに保存するデータを指定します。

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

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

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

name = getCookie( "NAME" ) ;
times = getCookie( "TIMES" ) ;
...1
if ( name == "" ) {
name = prompt( "よかったらハンドルネームを入力してください。","" ) ;
if ( name == "" || name == "null" || name == null || name == "undefined" ) name = "ゲスト" ;
}
...2
  1. NAME、TIMES をそれぞれ因数として、getCookie() という関数を呼び出し、戻り値を それぞれ name、times という変数に代入します。クッキーを読み込む関数です。
  2. name 代入された値が 空だった場合(初回訪問時など)、プロンプトウィンドウを表示して、ハンドルネームの入力を促します。
    入力結果が 空だったり、プロンプトウィンドウがキャンセルされた場合には、name は 『ゲスト』とします。
times++ ;...3
( times == "1" )? timesmsg = "初めて" : timesmsg = times + "回目" ;
document.write( name , "さん " , timesmsg , "のご訪問ありがとう。
" ) ;
...4
setCookie( "NAME" , name ) ;
setCookie( "TIMES" , times ) ;
...5
  1. 訪問回数を格納する変数 times に 1 加えます。
  2. times が 1 であれば、表示するメッセージの変数 timesmsg に "初めて"という言葉を、それ以外ならば ○回目、という文字列を代入し、訪問者へのメッセージを書き出します。
    『△△さん、○回目のご訪問ありがとう。』
    という表示になります。
  3. 文字列 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 * 24*60*60*1000 ) ;
...8
mck = key + "=" + escape( val ) + ";" ;...9
mck += "expires=" + myEXP.toGMTString() + ";" ;...10
document.cookie = mck ;
}
...11
  1. 先ほど引数として関数に引き渡された 文字列 NAME および TIME は この関数ないで key という変数として扱われます。name および times といった変数は、val という変数として扱われます。
  2. クッキーの有効期限を設定するため、new ステートメントで新しいオブジェクトを作成します。myEXP という名前にします。
  3. .getTime() で現在の日時を取得します。これは、1970年1月1日午前0時からの経過時間をミリ秒を返すメソッドです。
    この時間に、設定する有効期限の秒数(同じくミリ秒)を足した値を .setTime() メソッドで再び1970年1月1日午前0時からの経過時間として myEXP にセットします。
    名前が、『ゲスト』の状態では、有効期限を 7*24*60*60*1000 ミリ秒として、24時間アクセスが空いたアドで再び訊きなおす設定にしています。それ以外では、クッキーの有効期限は 365*24*60*60*1000 ミリ秒、つまり1年になります。
  4. クッキーに保存するためのデータを整形します。クッキーに保存するデータの形式は、
    データ名1 = データ内容1 ; データ名2 = データ内容2...
    というふうである必要があるため、= や ; をつなぎ合わせています。
    保存するデータに日本語が含まれる場合は escape() で、文字コードに変換する必要があります。
  5. 前項のデータに、有効期限を追記します。有効期限を格納する変数 myEXP を、.toGMTString() メソッドでグリニッジ標準時に 整えていますから、expires=Mon, 31 Dec 2001 23:59 :59 GMT; というような形状になります。
  6. 最終的にクッキーに保存されるのは、このサンプルで言うと、
    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
  1. クッキーを読み込む関数です。引数として渡された NAME および TIMES の文字列は、この関数内で key という変数として扱われます。
  2. mck という変数に、クッキーデータを代入します。末尾に ; を付けて整形します。
  3. 変数 mck (クッキーデータ) に、NAME および TIMES の文字列が含まれるかどうか、indexOf() を使って検索します。あれば、その先頭の位置が、なければ -1 という値が index1 という変数に代入されます。
  4. index1 が -1 でない、つまり上記文字列を含んでいた場合、{ }内の処理が実行されます。
  5. 変数 mck substring で切り出します。最初に key ( NAME や TIMES ) の各文字列のある位置 以降 を mck に代入します。
  6. 変数 index2 には、前項で切り出された文字列 mck の なかで、最初に = が出現する位置が代入されます。
  7. 変数 index3 には、前項で切り出された文字列 mck の なかで、最初に ; が出現する位置が代入されます。
  8. この index2 と index3 を使って、さらに 文字列 mck を切り出します。 mck.substring( index2 , index3 ) は、= と ; で挟まれた間の文字列となります。
    これを、再び unescape で文字コードから文字に変換して、この関数の戻り値とします。
  9. 前項15 で、false だった場合の戻り値は、""(空)になります。これは、初回訪問時など、クッキーデータが存在しない場合に該当します。

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

同一カテゴリ内一覧
クッキーを使って訪問回数を表示する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス