クッキーを使い訪問数をカウントするJavaScriptサンプル。
サンプル(実装例)
このページへの訪問回数:
サンプル(実装例)の動作について
- 「このページへの訪問回数:」の右横に、このページへの訪問回数を表示する。
- 「削除」ボタンをクリックすると、訪問回数を記録したクッキーを削除する。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $count = getCookie( 'sampleNumberOfVisits' );
if( !$count ){
setCookie( 'sampleNumberOfVisits', 1, 1 );
}else{
setCookie( 'sampleNumberOfVisits', ++$count, 1 );
}
displayCookie( 'sampleNumberOfVisits' );
}
function setCookie( $cookieName, $cookieValue, $days ){
var $dateObject = new Date();
$dateObject.setTime( $dateObject.getTime() + ( $days*24*60*60*1000 ) );
var $expires = "expires=" + $dateObject.toGMTString();
document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}
function getCookie( $cookieName ){
var $cookies = document.cookie.split(';');
for( var $i=0; $i < $cookies.length; $i++ ){
var $cookie = $cookies[$i].trim().split( '=' );
if( $cookie[0] == $cookieName ){
return $cookie[1];
}
}
return "";
}
function deleteCookie( $cookieName ){
document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
displayCookie( $cookieName );
}
function displayCookie( $cookieName ){
var $cookieValue = getCookie( $cookieName );
document.getElementById( 'sampleOutput' ).innerHTML = $cookieValue;
}
</script>
window.onload = function () {
var $count = getCookie( 'sampleNumberOfVisits' );
if( !$count ){
setCookie( 'sampleNumberOfVisits', 1, 1 );
}else{
setCookie( 'sampleNumberOfVisits', ++$count, 1 );
}
displayCookie( 'sampleNumberOfVisits' );
}
function setCookie( $cookieName, $cookieValue, $days ){
var $dateObject = new Date();
$dateObject.setTime( $dateObject.getTime() + ( $days*24*60*60*1000 ) );
var $expires = "expires=" + $dateObject.toGMTString();
document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}
function getCookie( $cookieName ){
var $cookies = document.cookie.split(';');
for( var $i=0; $i < $cookies.length; $i++ ){
var $cookie = $cookies[$i].trim().split( '=' );
if( $cookie[0] == $cookieName ){
return $cookie[1];
}
}
return "";
}
function deleteCookie( $cookieName ){
document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
displayCookie( $cookieName );
}
function displayCookie( $cookieName ){
var $cookieValue = getCookie( $cookieName );
document.getElementById( 'sampleOutput' ).innerHTML = $cookieValue;
}
</script>
HTML
<p>
<button onclick="deleteCookie( 'sampleNumberOfVisits' );">削除</button>
</p>
<p>
このページへの訪問回数:<span id="sampleOutput"></span>
</p>
<button onclick="deleteCookie( 'sampleNumberOfVisits' );">削除</button>
</p>
<p>
このページへの訪問回数:<span id="sampleOutput"></span>
</p>
解説
JavaScript
<script type="text/javascript">
// ページ読み込み時の処理
window.onload = function () {
// クッキーに保存した訪問回数を取得し、変数「$count」に格納
var $count = getCookie( 'sampleNumberOfVisits' );
if( !$count ){ // 変数「$count」が空の場合の処理
setCookie( 'sampleNumberOfVisits', 1, 1 );
}else{ // 変数「$count」が空でない場合の処理
setCookie( 'sampleNumberOfVisits', ++$count, 1 );
}
// 訪問回数を表示する関数を呼び出す
displayCookie( 'sampleNumberOfVisits' );
}
// クッキーを設定する関数
function setCookie( $cookieName, $cookieValue, $days ){
// Dateオブジェクトを生成
var $dateObject = new Date();
// クッキーの有効期限を示すDateオブジェクトを生成
$dateObject.setTime( $dateObject.getTime() + ( $days*24*60*60*1000 ) );
// 有効期限をグリニッジ標準時に変換
// 有効期限をクッキーに設定するための文字列を、変数「$expires」に代入
var $expires = "expires=" + $dateObject.toGMTString();
// 有効期限付きでクッキーを設定
document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}
// クッキーを取得する関数
function getCookie( $cookieName ){
// 「;」区切りで分割し、配列「$cookies」に格納
var $cookies = document.cookie.split(';');
// クッキーの数だけループ
for( var $i=0; $i < $cookies.length; $i++ ){
// クッキーを「=」区切りで分割し、配列「$cookie」に格納
var $cookie = $cookies[$i].trim().split( '=' );
// クッキー名が仮引数「$cookieName」と同じであれば値を返す
if( $cookie[0] == $cookieName ){
return $cookie[1];
}
}
return "";
}
// クッキーを削除する関数
function deleteCookie( $cookieName ){
// 過ぎた有効期限を設定することで削除できる
document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
// 訪問回数を表示する関数を呼び出す
displayCookie( $cookieName );
}
// 訪問回数を表示する関数
function displayCookie( $cookieName ){
// クッキーに保存した訪問回数を取得
var $cookieValue = getCookie( $cookieName );
// 訪問回数を表示
document.getElementById( 'sampleOutput' ).innerHTML = $cookieValue;
}
</script>
// ページ読み込み時の処理
window.onload = function () {
// クッキーに保存した訪問回数を取得し、変数「$count」に格納
var $count = getCookie( 'sampleNumberOfVisits' );
if( !$count ){ // 変数「$count」が空の場合の処理
setCookie( 'sampleNumberOfVisits', 1, 1 );
}else{ // 変数「$count」が空でない場合の処理
setCookie( 'sampleNumberOfVisits', ++$count, 1 );
}
// 訪問回数を表示する関数を呼び出す
displayCookie( 'sampleNumberOfVisits' );
}
// クッキーを設定する関数
function setCookie( $cookieName, $cookieValue, $days ){
// Dateオブジェクトを生成
var $dateObject = new Date();
// クッキーの有効期限を示すDateオブジェクトを生成
$dateObject.setTime( $dateObject.getTime() + ( $days*24*60*60*1000 ) );
// 有効期限をグリニッジ標準時に変換
// 有効期限をクッキーに設定するための文字列を、変数「$expires」に代入
var $expires = "expires=" + $dateObject.toGMTString();
// 有効期限付きでクッキーを設定
document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}
// クッキーを取得する関数
function getCookie( $cookieName ){
// 「;」区切りで分割し、配列「$cookies」に格納
var $cookies = document.cookie.split(';');
// クッキーの数だけループ
for( var $i=0; $i < $cookies.length; $i++ ){
// クッキーを「=」区切りで分割し、配列「$cookie」に格納
var $cookie = $cookies[$i].trim().split( '=' );
// クッキー名が仮引数「$cookieName」と同じであれば値を返す
if( $cookie[0] == $cookieName ){
return $cookie[1];
}
}
return "";
}
// クッキーを削除する関数
function deleteCookie( $cookieName ){
// 過ぎた有効期限を設定することで削除できる
document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
// 訪問回数を表示する関数を呼び出す
displayCookie( $cookieName );
}
// 訪問回数を表示する関数
function displayCookie( $cookieName ){
// クッキーに保存した訪問回数を取得
var $cookieValue = getCookie( $cookieName );
// 訪問回数を表示
document.getElementById( 'sampleOutput' ).innerHTML = $cookieValue;
}
</script>