Cookieを利用して、訪問回数をカウントする方法

By | 2016/06/05

今回はcookieを利用して訪問回数をカウントする方法をまとめてみました。

javascriptが得意でない人でも、後からアレンジしやすいようにコメントを多めに入れておきましたので、よろしければ参考にご利用ください。

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

//cookieが使えるか確認
if (navigator.cookieEnabled){
  cook=document.cookie + ";"; //変数cookにcookieデータを入れる
  //変数cStartにカウントデータの最初の位置を入れる
  //indexOf()で指定した文字列を検索しています
  //この場合、"count="が存在すれば"0"、そうでなければ"-1"を返します
  cStart = cook.indexOf("counts=",0);

  //データの有無で分岐
  if (cStart == -1){
    //データの無い場合は最初の訪問
    document.write("1回目の訪問です!");
    //cookieに訪問回数=1を書き込む
    document.cookie="counts=1;";

  }else{
  //カウントデータの最後の部分「;」の位置を取得
  cEnd=cook.indexOf(";",cStart);
  //subString()で数値の部分だけを取り出します
  //(cStart+7,cEnd)は"counts="と";"の間を指定しています
  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>

[demo]

基礎的な部分はこれをコピペしていただければ、大丈夫です。

ここから必要に応じてカスタマイズしていくことになると思います。

(この機能はローカル環境では確認できません。)

この記事を読んでくださった方の少しでも役に立てたなら幸いです!

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です