JavaScript - クッキー

JavaScript プログラミング

　１１．クッキー

　ホームページ内に組み込める形のスクリプト言語には、セキュリティの面からクライアント（Webサーバーなどからサービスの提供を受ける側のコンピュータのこと。早い話が今使っているコンピュータである。）の磁気ディスクをアクセスする命令（関数）が用意されていない。ところで、ときどき「いらっしゃいませ。xx回目の訪問です。」というように訪問した回数が表示されるホームページを経験したことはないだろうか。どこかに訪問回数を記録しておく必要がある、ということはわかるだろう。しかし、スクリプト言語ではクライアントに記録できない。一つの方法として、CGI(Common Gateway Interface)などを用いてサーバー側に記録することが考えられる。
　では、スクリプト言語の場合は記録しておく方法がないのだろうか。前置きが長くなったが、スクリプト言語言語でも記録しておくことができる手段が提供されている。それがクッキー(Cookie)である。

(1) クッキーの書き込み
　クッキーの情報を記録するには、HTMLのタグ、JavaスクリプトやCGIを使う。

JavaScript document.cookie = "文字列(情報)";

　「文字列(情報)」の部分は次のようにして指定する。（主なものだけ）

name=データ; expires=有効期限

　nameの部分はデータを区別するためのもので任意の文字列を指定する。「name=データ」の部分はセミコロン(;)で区切って複数指定してもよい。
　expires(有効期限)は省略可能。省略したときはブラウザを終了するまでの期間となる。過去の値を指定するとクッキー情報は削除される。

データ
　実際に記録しておきたいデータは「name=データ」の部分である。このデータ部分にカンマや日本語を使用するときは escape()で変換する。（元に戻すには unescape()を使う。）

有効期限
　何年何月何日まで有効かを指定する。有効期限の日時をGMT(Greenwich Mean Time:グリニッジ標準時)で指定する。

kigen = new Date();    //日付オブジェクトの作成
// 期限を7日間とする場合。
kigen.setTime(kigen.getTime() + (7 * 1000 * 60 * 60 * 24));
kigen2 = kigen.toGMTString();    // 期限の日時をGMTに変換

kigen.setTime( kigen.getTime() + (7 * 1000 * 60 * 60 * 24));

③ ① ②

　①　1970年1月1日0時0分0秒から現在までの秒数(ミリ秒)を取り出す。
　②　7日後の秒数を計算する。
　①+②　7日後の日時を1970年1月1日0時0分0秒からの秒数で表した値。
　③　秒数（①+②）を日付オブジェクトkigenに設定する。

（例） userという名前で"使用者"というデータをクッキーに保存する。保存期間は10日間とする。
    dat = "使用者";
    kigen = new Date();
    kigen.setTime(kigen.getTime() + (10 * 1000 * 60 * 60 * 24));
    kigen2 = kigen.toGMTString();
　　document.cookie = "user=" + escape(dat) + ";expires=" + kigen2;

(2) クッキーの読み込み
　document.cookie で参照できる。複数の情報（name=データ）が記録されている場合、セミコロンで区切られて読み込まれる。例えば、「user=使用者」と「pass=X3e5h」が記録されているとき、document.cookieで「user=使用者;pass=X3e5h」という形でデータが取り出せる。

　記録するとき、データ部分はescape()でエンコードしておくのが一般的なのでunescape()でデコードする。

　情報は○○＝△△の形で得られる。必要なのは△△のデータ部分であることが多いので、△△の部分だけを取り出す処理を作る必要がある。

(3) クッキー情報の読み書き関数
　私がクッキー情報の読み書きに利用している関数を示す。
　この関数ではクッキー情報 name=データのname をキーワード、データはデータと表している。

// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーへの書き込み
// 　　引数：kword=キーワード　　kdata=データ　　kday=保存期間(日数)
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieWrite(kword, kdata, kday)
{
  if(!navigator.cookieEnabled){    // クッキーが利用可能かどうか
    alert("クッキーへの書き込みができません");
    return;
  }
  sday = new Date();
  sday.setTime(sday.getTime() + (kday * 1000 * 60 * 60 * 24));
  s2day = sday.toGMTString();
  document.cookie = kword + "=" + escape(kdata) + ";expires=" + s2day;
}

　user=使用者とpass=X3e5hという情報を30日間記録する場合、次のようにする。
　　　　CookieWrite("user", "使用者", 30);
　　　　CookieWrite("pass", "X3e5h", 30);

// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーから読み込み
// 　　引数：kword=キーワード
// 　　返却値：データ
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieRead(kword)
{
  if(typeof(kword) == "undefined")　　// キーワードなし
    return "";        // 何もしないで戻る
  kword = kword + "=";
  kdata = "";
  scookie = document.cookie + ";";　　　　// クッキー情報を読み込む
  start = scookie.indexOf(kword);   　// キーワードを検索
  if (start != -1){    // キーワードと一致するものあり
    end = scookie.indexOf(";", start);    // 情報の末尾位置を検索
    kdata = unescape(scookie.substring(start + kword.length, end));  // データ取り出し
  }
  return kdata;
}

　user=使用者とpass=X3e5hという情報が記録されており、pp = CookieRead("pass"); とした場合、どのように処理されるかを次に示す。

1行目	引数kwordに"pass"が格納される。	kword="pass"
3行目	kwordと""は等しくないので5行目へ移る。
5行目	kwordの末尾に"="を連結する。kwordの内容は"pass="となる。	kword="pass="
6行目	kdataに""を格納する。(kdataのクリア。必須ではない。)
7行目	クッキー情報("user=使用者;pass=X3e5h")の末尾に";"を連結し、 scookieに格納する。 "使用者"の部分は　%u4F7F%u7528%u8005　となっている。	scookie="user=使用者;pass=X3e5h;"
8行目	scookieの内容からkwordを検索する。 user=%u4F7F%u7528%u8005;pass=X3e5h; 一致したpの位置がstartに格納される。	start=24 先頭を0として数える。
9行目	次の行へ
10行目	24番目以降に";"があるか検索する。	end=34
11行目	substringメソッドは部分文字列(start+kword.length番目から end番目の手前まで)を取り出す。取り出した文字をunescapeでデコードし、kdataに格納する。	kdata="X3e5h"
13行目	kdataの内容を返却する。

クッキー情報読み書きのサンプルプログラムを示す。じっくりと読んでみよう。

HTMLリスト　[[jsrei15.html]]

<HTML>
<HEAD>
<TITLE>クッキーの利用</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーへの書き込み
// 　　引数：kword=キーワード　　kdata=データ　　kday=保存期間(日数)
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieWrite(kword, kdata, kday)
{
  if(!navigator.cookieEnabled){    // クッキーが利用可能かどうか
    alert(";クッキーへの書き込みができません");
    return;
  }
  sday = new Date();
  sday.setTime(sday.getTime() + (kday * 1000 * 60 * 60 * 24));
  s2day = sday.toGMTString();
  document.cookie = kword + "=" + escape(kdata) + ";expires=" + s2day;
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーから読み込み
// 　　引数：kword=キーワード
// 　　返却値：データ
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieRead(kword)
{
  if(typeof(kword) == "undefined")　　// キーワードなし
    return "";        // 何もしないで戻る
  kword = kword + "=";
  kdata = "";
  scookie = document.cookie + ";";　　　　// クッキー情報を読み込む
  start = scookie.indexOf(kword);   　// キーワードを検索
  if (start != -1){    // キーワードと一致するものあり
    end = scookie.indexOf(";", start);    // 情報の末尾位置を検索
    kdata = unescape(scookie.substring(start + kword.length, end));  // データ取り出し
  }
  return kdata;
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキー削除
// 　　引数：kword=キーワード
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieDelete(kword)
{
  document.cookie = kword + "=;expires=Thu,01-Jan-70 00:00:01 GMT";
}
//-->
</SCRIPT>
<P>クッキーの利用</P>
<FORM name="rei15">キーワード<BR>
 keyword1 = <INPUT size="20" type="text" name="dat">
 <INPUT type="button" value="Cookie書き込み"
 onclick='CookieWrite("keyword1",dat[0].value,1);'>
<BR>
 keyword2 = <INPUT size="20" type="text" name="dat">
 <INPUT type="button" value="Cookie書き込み"
 onclick='CookieWrite("keyword2",dat[1].value,1);'>
<BR>
 keyword3 = <INPUT size="20" type="text" name="dat">
 <INPUT type="button" value="Cookie書き込み"
 onclick='CookieWrite("keyword3",dat[2].value,1);'>
<BR>
 <BR>
　<INPUT type="button" value="Cookie読み込み"
 onclick='dat2[0].value = CookieRead("keyword1");
    dat2[1].value = CookieRead("keyword2");
    dat2[2].value = CookieRead("keyword3");'><BR>
 keyword1 = <INPUT size="20" type="text" name="dat2"><BR>
 keyword2 = <INPUT size="20" type="text" name="dat2"><BR>
 keyword3 = <INPUT size="20" type="text" name="dat2"><BR>
 <BR>
　<INPUT type="button" value="Cookie削除"
 onclick='CookieDelete("keyword1");
    CookieDelete("keyword2");
    CookieDelete("keyword3");'>
</FORM>
</BODY>
</HTML>


JavaScript プログラミング	Copyright © 2003 Hiroshi Masuda

kigen.setTime(	kigen.getTime() +	(7 * 1000 * 60 * 60 * 24));
③	①	②