cookieを使って訪問回数をカウントするJavaScript入門

訪問回数をカウントする流れ

まずは、訪問回数を表示するまでの流れを見ておきましょう。 初めてサイトを訪れた場合は、以下のようになります。

2回目以降の訪問の場合は、次のようになります。

訪問回数を表示するスクリプト

では上記の流れでスクリプトを組んでみましょう。 HTMLファイルを作成し、以下のコードをBODY内に記入してみてください。

<script>

var cook;       //cookieデータを格納する変数
var cStart,cEnd;  //訪問回数部分を切取る為の位置を格納
var cnt;        //訪問回数を格納

//cookieが使えるか確認
if (navigator.cookieEnabled)
{
  cook=document.cookie + ";";  //変数cookにcookieデータを入れる
  
  //変数cStartにカウントデータの最初の位置を入れる
  cStart = cook.indexOf("counts=",0);
  
  //データの有無で分岐
  if (cStart == -1)
  {
    //データの無い場合は最初の訪問ということ
    document.write("1回目の訪問です！");
    
    //cookieに訪問回数=1を書き込む
    document.cookie="counts=1;";  
  }
  else
  {
    //カウントデータの最後の部分「;」の位置を取得
    cEnd=cook.indexOf(";",cStart);
    
    //数値の部分だけを切り取る
    cnt=cook.substring(cStart+7,cEnd);
    
    //数値に変換できない例外が出た時の処理
    try
    {
      //取得した回数に+1して表示する
      cnt=parseInt(cnt)+1;
      document.write(cnt+"回目の訪問です！");
      
      //cookieに訪問回数を書き込む
      document.cookie="counts="+cnt+";";
    }
    catch(e)
    {
      document.write("訪問回数の取得に失敗しました。");
    }
  }
}
else
{
  //cookieが使用できない時の処理
  document.write("cookieが使用できません。");
}

</script>

サンプル↓（ブラウザの更新ボタンを押して、回数が増えるか確かめてみてください）

スクリプトの解説

では上記スクリプトの解説をしておきます。

変数宣言

最初に、使う変数をまとめて宣言しておきました。その方が解説し易かったからです。 変数cookは読み込んだクッキーデータを格納します。

変数cStartと変数cEndは、 そのクッキーデータのうち訪問回数が格納されている部分を切り取るための位置情報を格納します。 実はcookieには自分で書き込んだもの以外にも沢山の文字が書き込まれています。 以下のボタンを押して、実際にクッキーに記入されているものを見てみてください。

変数cntは、切り取った訪問回数、及びそれに1プラスしたものを格納します。

cookieが使えるか確認

次に、cookieが使用可能かif文を使って確認しています。 ブラウザの設定によっては、cookieが使えないこともあります。 cookieが使用可能かどうかは、navigator.cookieEnabledを使って確認できます。

navigator.cookieEnabled

cookieが使用可能ならtrue、不可ならfalseを返します。

cookieデータを取得する

今度は、変数cookにcookieデータを読み込ませます。 cookieデータを取得したり、書き込んだりするには、document.cookieを使用します。 document.cookieが右辺にくれば、データを取得することになり、 左辺に来るとデータ書き込みになります。

str = document.cookie

変数strにcookieデータを読み込ませます。

document.cookie = str

変数strの情報をcookieに書き込みます。

最後に、取得したcookieデータの末尾にセミコロン「;」を付けてやります。 理由は後で説明します。

カウントデータを探す

取得したcookieデータの中に、カウント数が記録されているかどうか調べます。 普通cookieにデータを書き込むには、 データ名、値、 終了記号の３つを組み合わせて書き込みます。 こうすると後からデータを取り出しやすくなります。 今回はデータ名を「counts」、終了記号を「;」にして、以下の形式で書き込みます。

counts=値;

ということで「counts=」がcookieデータに含まれていれば、 2回目以降の訪問ということになります。

文字列を検索するのはindexOf()を使います。 変数cStartに、「counts=」の位置を格納します。 もし初めての訪問であれば「counts=」は存在しないので、変数cStartの値は-1となります。 if文で「counts=」が無い場合と、ある場合に分岐させます。

初めての訪問の時

初めての訪問の時（変数cStartの値が-1の時）は、 document.write()で「1回目の訪問です！」と表示させます。

続いて、カウントデータを書き込みます。 document.cookieを左辺に持ってきて、「counts=1;」と書き込みます。

2回目以降の訪問の時

2回目以降の訪問の時は、「counts=」が存在しているので、 今度は終了記号の「;」を探します。indexOf()を使って探しますが、 その検索開始位置を変数cStartにすれば、 「;」が複数存在していても間違った位置を取得することはありません。 取得した数値を変数cEndに代入します。

さて、カウントデータの最初の位置と最後の位置が分かったら、 その中から必要な値の部分だけを切り出します。 文字の切り出しはsubstring()を使います。 終了位置は変数cEndでいいのですが、開始位置は変数cStartのままではいけません。 欲しいのは値の部分だけなので、 「counts=」の7文字分を加えた所を開始場所にしています。 切り取った値を、変数cntに代入します。

一応try～catch文を使って、例外処理をしています。 変数cntの値をparseInt()で数値に変換してから+1します。 そしてdocument.write()で訪問回数を書き出し、 document.cookieで訪問回数をcookieに記録します。 記録の形式は「counts=値;」でした。

最後にセミコロンを付けた理由

さて、先程クッキーデータを変数cookに代入する際、最後にセミコロン「;」を付加しました。 実はcounts=値;の形でcookieに書き込んでも、このデータがcookieの一番最後に記述されるとセミコロンが脱落してしまうのです。 すると終了記号がなくなるので、切り出しに失敗します。これを回避するには、 クッキーデータ取得後末尾にセミコロンを改めて付けてあげれば良いわけです。

さて、上記のままだと、実はブラウザを閉じた時に訪問回数がリセットされてしまいます。 これは、cookieの期限を記載していないからです。 ということでこのままでは訪問カウンターとしては使えません。 では次のページで、cookieの期限を記載する方法について解説してみます。