梅ちゃん堂 > JavaScript 入門 > JavaScript 実用編 >
- クッキー調理法 -

ウェブで使用される JavaScript は通常、ユーザーのシステムに書き込んだり、 書き込んだ情報を読みとったりすることは出来ません。それはセキュリティ上の理由から制限が加えられているからだと思います。

唯一の例外はクッキー(Cookie)です。スクリプトで使用されたデータは一時的にメモリに格納されますが、 システムが更新されると消えてしまいます。そこで、クッキーファイルにデータを書き込んでおき、次の機会にこれを読み込むことで、 データの継続的な使用が可能になります。これはソフトウェアがデータをレジストリや .ini ファイルに保存するのと同じ発想です。

但しクッキーはオンライン上でやりとりされるため、 気づかない内にクッキーが書き込まれたり読み込まれたりするのを嫌ってブラウザのクッキー機能を無効に設定する人もいます。 そうした人に配慮して、クッキーを使用することをページ上で断った方が良いかも知れません。

Internet Explorer 4.x 以上、Netscape 6.x 以上には、 閲覧者がブラウザのクッキーを有効にしているか否かを取得するプロパティがあります。 navigator.cookieEnabled はクッキーが有効ならば true を、無効ならば false を返します。 navigator.cookieEnabled を認識しないブラウザでは undefined を返します(クッキーが無効とは限りません)。

if (navigator.cookieEnabled != undefined)
document.write(navigator.cookieEnabled ? "「クッキーが有効です。」" : "「クッキーが無効です。」");

実際のクッキーのやりとりでは、document.cookie というプロパティを使用します。 クッキーのために用意されているのは、これだけです。

クッキーに書き込みできるのは、名前や数値、メールアドレスや URL、 またあまり推奨できませんがパスワードや住所、電話番号など、比較的短いデータに限ります。

一時的なクッキー

一時的なクッキーとは、現在のセッションでのみ使用され、セッションから離れると消えてしまうようなクッキーのことです。 例えば、

document.cookie = "JavaScript";

としておき、

alert(document.cookie);

でクッキーを取り出すことが出来ます。 現在のページだけでなく、同一ディレクトリ上で有効です。



<FORM name="test1">
<INPUT type="text" name="set1" value="JavaScript" size=10 maxlength=10>
<INPUT type="button" value="==> COOKIE に入れる" onClick="document.cookie = document.test1.set1.value"><BR><BR>
<INPUT type="button" value="COOKIE は?" onClick="alert(document.cookie)">
</FORM>

この一番簡単な方法は、しかし閲覧者のアクセス環境によっては予期せぬデータがクッキーに混入してしまい、 期待通りのデータを引き出せない場合があります。また1回に1つのデータしか書き込めません。 ではクッキーの正しい調理法を紹介しましょう。

Sample 11
名前 URL

ソース

<SCRIPT type="text/javascript">
<!--
  function setCookie(name, value) {
    document.cookie = name + "=" + value + ";";
  }
//-->
</SCRIPT>

<FORM name="test2">
名前 <INPUT type="text" name="set1" value="JavaScript" size=10 maxlength=10>
URL <INPUT type="text" name="set2" value="http://www.umechando.com/javascript/" size=60 maxlength=60>
<INPUT type="button" value="==> COOKIE に入れる" onClick="setCookie(document.test2.set1.value,document.test2.set2.value)"><:BR><BR>
<INPUT type="button" value="COOKIE は?" onClick="alert(document.cookie)">
</FORM>

上のサンプルで「==> COOKIE に入れる」をクリックすると、名前 = URL の組み合わせでクッキーに書き込みが行われます。 その中身は「COOKIE は?」で確認できますが、以前の例のようにクッキーの中身が丸ごと書き換えられるのではなく、 書き加えられるのがわかると思いまず。

「名前」や「URL」の値を色々変えて試してみて下さい。URL のみを変えると、 クッキーの中の対応する URL のみが書き代わるのがわかります。

継続的なクッキー

一時的なクッキーはセッションを離れるとデータが消えてしまいますが、 継続的なクッキーは、例えばコンピュータを再起動して同じページに再度アクセスしたときでも、 データが残っています。そのためには、クッキーの有効期限を設定してやらなければなりません。

クッキーのデータだけでなく、ドメインやパス、 有効期限も指定する本格的なクッキーを作ってみましょう。 また、個々のデータの取り出し方や、消し方も学びましょう。

document.cookie = data を使ってクッキーにデータを入れる点はここでも変わりませんが、 data の内容を

データ名=データ内容; domain=ドメイン名; path=パス名; expires=有効期限の GMT 値;

という構成にします。 (この後に secure; を加えてクッキー情報を暗号化する場合もあります。)

例:
cookieData = "site_name=梅ちゃん堂;domain=www.umechando.com;path=/javascript/;expires=Fri, 01-Dec-2020 00:00:00 GMT;";

いずれも nama=value という形式ですが、個々の式はセミコロン(;)で区切られることに注意しましょう。

クッキーが作成されると、データは "データ名=データ内容; データ名=データ内容; . . ." という文字列形式で、 入れたデータの数だけクッキーに入っています。(ドメイン名やパス名、有効期限などはデータに入っていません。)

ここから必要なデータを取り出すには、データ名がキーとなります。 例えば "site_name=電脳レストハウス「梅ちゃん堂」;" という形式でデータを入れたとすれば、 site_name という文字列をクッキーの中から探し出し(key = document.cookie.indexOf("site_name",0))、 この key を出発点として最初のセミコロン(;)までを1まとまりのデータとして取得します。 このデータからキーの長さ("company".length)に = の長さ(1)を足した分を差し引いた残りが実際のデータ内容となります。

また、あらかじめデータを escape( ) でエンコードしていた場合は、 ここで unescape( ) を使ってデコードする必要があります。

Sample 12
name value

ソース

<SCRIPT type="text/javascript">
<!--
  var eq = "=";
  var semic = ";";

  function writeCookie(name, value) {
    comming_time = new Date( );
    comming_time.setFullYear(comming_time.getFullYear( ) + 1);
    time_limit = "expires=" + comming_time.toGMTString( ) + semic;
    document.cookie = name + eq + escape(value) + semic + time_limit;
  }

  function readCookie(name) {
    name += eq;
    cooky = document.cookie + semic;
    key = cooky.indexOf (name, 0);
    if(key < 0) {
        alert(name + " に対応するデータが見つかりません。");
        return;
    }
    hole = cooky.indexOf(semic, key);
    if (hole >= 0) {
        document.test3.answer.value = unescape(cooky.substring(key + (name).length, hole));
        alert("データを取得しました。");
    }
  }
//-->
</SCRIPT>

<FORM name="test3">
name <INPUT type="text" name="set1" value="site_name" size=10 maxlength=10>
value <INPUT type="text" name="set2" value="電脳レストハウス「梅ちゃん堂」" size=40 maxlength=40>
<INPUT type="button" value="==> COOKIE に入れる" onClick="writeCookie(document.test2.set1.value,document.test2.set2.value)"><:BR><BR>
<INPUT type="button" value="データ取得" onClick="readCookie(document.test3.set1.value)""><INPUT type="text" name="answer" value="" size=40 maxlength=40>
</FORM>

最後にデータの消し方ですが、document.cookie = "" とやってもデータは消えません。 クッキーデータを消すには、指定したデータ名に対して有効期限を過去の日時にするのが唯一の手段です。 有効期限を現在よりも1年前にすれば間違いないでしょう。

例:
function delCookie(name) {
  comming_time = new Date( );
  comming_time.setFullYear(comming_time.getFullYear( ) - 1);
  time_limit = "expires=" + comming_time.toGMTString( ) + ";";
document.cookie = name + "=;" + time_limit;
}

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved