cookieの期限を指定するJavaScript入門

cookieの有効期限を指定する流れ

最初に、Cookieの有効期限を指定する流れを掲載しておきます。 期限を30日後に指定したい場合、次のような手順を踏みます。

では前回の訪問数カウントスクリプトに、期限を付けて記録してみることにしましょう。

期限付きでCookieに記録するスクリプト

前回のスクリプトをそのまま利用したいと思います。 変更箇所以外は灰色表示にしています。また前回のコメントは取り除いています。

<script>

var cook;
var cStart,cEnd;
var cnt;

var date1,date2;  //日付データを格納する変数
var kigen = 30;   //cookieの期限（今回は30日）

//現在の日付データを取得
date1 = new Date();

//30日後の日付データを作成
date1.setTime(date1.getTime() + kigen*24*60*60*1000);

//GMT形式に変換して変数date2に格納する
date2 = date1.toGMTString();

if (navigator.cookieEnabled)
{
  
  cook=document.cookie + ";";
  cStart = cook.indexOf("counts=",0);
  
  if (cStart == -1)
  {
    document.write("1回目の訪問です！");
    document.cookie="counts=1;expires=" + date2;  
  }
  else
  {
    cEnd=cook.indexOf(";",cStart);
    cnt=cook.substring(cStart+7,cEnd);
    try
    {
      cnt=parseInt(cnt)+1;
      document.write(cnt+"回目の訪問です！");
      document.cookie="counts="+cnt+";expires="+ date2;
    }
    catch(e)
    {
      document.write("訪問回数の取得に失敗しました。");
    }
  }
}
else
{
  document.write("cookieが使用できません。");
}

</script>

以下がこのスクリプトのサンプルです。ブラウザを閉じてもう一度アクセスしてみてください。 今度はカウント数がリセットされないと思います（30日以内であれば！)。

上記スクリプトの解説

ではスクリプトを詳しく見ていきましょう。前回解説した部分は前のページを参照して下さい。 新しく書き足した部分を説明していきます。

変数の宣言

まずは日付データを入れる変数date1,date2と、 有効期限（日数）を入れる変数kigenを宣言しています。 期限を変更したい場合は、変数kigenの値を変更すればすぐに対応できます。

現在の日付データを取得する

現在の日付データを取得して、変数date1に代入しています。 現在の日付データはnew Date()で取得できました。 これは簡単ですね。

30日後の日付データを作成する

次に30日後の日付データを作成したいのですが、これが少し厄介です。 現在の日付データから年・月・日を取得して、 月に１プラスして新たに日付データを作ってもいいですが、 12月の場合は年を加える必要がありますし、31日や28日の月もあります。 それらを条件分岐していると結構煩雑なコードになります（うるう年なども考えるとえらく大変です）。

こんな時に便利なのが、setTime()という命令文です。setTime()は「時間」を指定する命令文ですが、 この「時間」とは3"時"とか12"時"の時間ではありません。 1970年1月1日午前0時から何ミリ秒後か…という意味の時間を設定する命令文なのです。

日付データ.setTime()

日付データの時間（1970/1/1 00:00:00からのミリ秒）を設定します。

同じ意味でgetTime()というのは、日付データが1970年1月1日午前0時から何ミリ秒後かを取得します。

日付データ.getTime()

日付データの時間（1970/1/1 00:00:00からのミリ秒）を取得します。

変数date1（現在の日時）のミリ秒をgetTime()で取得し、 30日＝30×24×60×60×1000ミリ秒を加えた値を、setTime()で再び変数date1にセットしています （ただし今回は30ではなく、変数kigenを使用しています）。

GMT（グリニッジ標準時）で表わす

cookieに期限を書き込む場合は、GMTで書き込みます。 ということで、日付データをGMTに変換し、変数date2に格納しています。 グリニッジ標準時に変換するには、toGMTString()を使います。

日付データ.toGMTString()

日付データをグリニッジ標準時に変換します。

それぞれどのように表示されるか、下のボタンで確認してみてください。 日本の場合、9時間の差が出ていると思います。

有効期限も一緒にcookieに書き込む

最後に、有効期限をcookieに書き込む方法について見ておきます。 有効期限付きにするには、expires=GMTという形式で書き込みます。

expires=GMT

cookieに有効期限（GMT）を付します。

これで無事に訪問回数をカウントすることができるようになりました。

ここまでは、数値を書き込む方法について見てきました。 数字の場合、そのままcookieに書き込むことができるので簡単です。 しかし文字の場合は簡単ではありません。 では次のページで、cookieで文字を扱う方法について見てみることにしましょう。