cookie.jsを作ってみるJavaScript入門

cookie書き込み関数

最初にcookie書き込み関数を作ってみたいと思います。以下のようにしてみました。

function ckSave(nam,val,term)
{
  if (navigator.cookieEnabled)
  {
    var date = new Date();

    try
    {
      term = parseInt(term);
    }
    catch(e)
    {
      term = 30;
    }
      
    date.setTime(date.getTime()+term*24*60*60*1000);
    
    document.cookie = nam+"="+escape(val)+";expires="+date.toGMTString();
    
    return true;
  }
  else
  {
    return false;
  }
}

関数名は「ckSave」、引数は順に「項目名」，「値」，「有効期限（日数）」です。

if文でcookieが使用可能か調べて、 可能なら日付データdateを作成します。 有効期限は数値で指定しても、引数を介して値を受け取ると数値ではなくなることがあるので、 parseInt()を使って数値に変換します。数値変換に失敗した場合は、期限を30日に設定し直します。 そして有効期限の日数をプラスした日付データに書き換えます。

そしてcookieを書き込みますが、注意点が２つありました。 値はescape文字に変換することと、日付データはGMTに変換するという2点です。

書き込みが成功したか調べるために、returnを使ってtrueもしくはfalseを呼び出し元に返します。 ということで、cookieを書き込む際にはif文を使って書き込みに成功したか調べると良いでしょう。

if ( ckSave("count",10,30) )
{
  alert("データを保存しました！");
}
else
{
  alert("データ保存に失敗しました！");
}

cookie読み込み関数

今度はcookieを読み込む関数を作ってみます。 こちらはreturnを使って「値」を呼び出し元に返すようにしてみました。

function ckLoad(nam)
{
  if (navigator.cookieEnabled)
  {
    var cook = document.cookie + ";";
    var cStart,cEnd;

    nam=nam+"=";

    cStart = cook.indexOf(nam,0);
    
    if (cStart == -1)
    {
      return "nodata";
    }
    else
    {
      cEnd = cook.indexOf(";",cStart);
      return unescape(cook.substring(cStart+nam.length,cEnd));
    }
  }
  else
  {
    return "nodata";
  }
}

関数名は「ckLoad」、引数は「項目名」の１つです。

最初にcookieが使用可能か調べます。 不可の場合はreturnで「nodata」という文字列を返すようにしています。

使用可能なら変数cookにcookieデータを読み込ませます。 そして引数「nam」に「=」を追加してから、indexOf()を使って検索しています。 検索結果が「-1」であれば、やはりreturnで「nodata」を返します。

項目名がcookieデータ内にあれば、今度は終了記号「;」を検索し、 substring()で値部分を切り取ります。 この時切り取り開始位置は、変数namの文字数だけプラスしなければなりません。 lengthを使って文字数を取得しています。

最後にunescape()でescape文字を普通の文字に戻しています。

cookieを読み出すには、以下のようにします。

var cnt = ckLoad("count");

if ( cnt != "nodata" )
{
  try
  {
    cnt=parseInt(cnt)+1;
    document.write(cnt+"回目の訪問です。");
  }
  catch(e)
  {
  }
}
else
{
  document.write("初めての訪問です。");
}

cookie削除関数

最後は、cookie削除関数を作ってみましょう。 やはり削除に成功したかどうか確認できるよう、returnでtrueかfalseを返すようにしています。

function ckDelete(nam)
{
  if ( navigator.cookieEnabled )
  {
    var date = new Date();
    date.setTime(0);
    
    document.cookie=nam+"=;expires="+date.toGMTString();
    return true;
  }
  else
  {
    return false;
  }
}

関数名は「ckDelete」，引数は「削除したい項目名」を指定できるようにしています。

cookieが使用可能か調べて、可能なら過去の日付データを作成し、 それを有効期限に指定して書き込みを行います。 書き込みができたらtrueを返し、できない時はfalseを返すようにしています。

cookie.jsの完成

では、上記の関数ckSave()，関数ckLoad()，関数ckDelete()を一つのファイルにコピペして、 「cookie.js」というファイル名で保存しましょう。 これでcookie関数をまとめて扱うことができます。

このcookie.jsを任意のページで読み込めば、簡単にcookieを読み書きできます。 簡単なサンプルを作っていますのでご確認ください。

cookie.jsの動作テストサンプル