Cookie

目次

はじめに

Cookie クラスはその名の通り、クッキーを扱う汎用クラスです。
このスクリプトは元々ある邦訳書に書いてあったものですが、それがあまりに素晴らしかったので、勝手ですが引用させて頂いています。簡単に使えるよう私なりに書き換えています。

使用例

以下のプログラムはユーザが訪れた回数を表示するというものですが、実際の例 を見た方が分かり易いでしょう。
<script>

// Cookie クラスインスタンス生成、名前は counter で有効期日は 7 日
var visitordata = new Cookie( "counter" , 7 );

// visits データが存在しない場合、visitordata のプロパティに visits を追加
if( visitordata.unload("visits") ) visitordata.visits = 0 ;

// visits をインクリメント
visitordata.visits++ ;

// クッキーに格納
visitordata.store();

// 訪れた回数を書き出す
document.write("You have visited "+visitordata.visits+" times.");

</script><body>

<!-- このボタンを押すとクッキーが削除される -->
<form><input type="button" value="Forget Count" onClick="visitordata.remove();"></form>

</body>

インスタンス変数

string   $name ;       // クッキーの名前
number   $expiration ; // クッキーの有効期限[日]
string   $path ;       // クッキーパス属性
string   $domain ;     // クッキーのドメイン属性
boolean  $secure ;     // クッキーのセキュリティ。保証が必要な場合 true
Document $document ;   // クッキーを格納する Document オブジェクト
boolean  $load ;       // クッキーの読み込み状態
難しそうですが、この中で入力必須なのは $name だけです。
$expiration , $path , $domain , $secure はクッキーの属性を表し、 これらについては 補足 で詳しく説明しています。

コンストラクタ

Cookie( string name , number expires , string path , string domain , boolean secure , Document document );
ややこしそうですが、他クラスのコンストラクタと違い、 設定したくないところは入力しなくても良いようになっています。 例えば、name と expires だけ設定したい場合は
var cookie = new Cookie( "sample" , 30 );
name と expires と secure を指定したい場合は
var cookie = new Cookie( "sample" , 30 , "" , "" , true );
という風に入力しないか、"" などネガティブな値を設定します。

インスタンスメソッド

クッキーの読み込み : load , unload
boolean load();
boolean load( string indexes );
引数なしは $name で指定したクッキーの読み込みが成功した場合 true を返します。
引数ありの場合は引数なしを実行し、かつ引数で指定したデータが存在する場合、true を返します。
引数ありとなしでは意味が違うので気を付けて下さい。 但し、引数なしは引数ありの方で実行されますので(引数なしの実行は一回のみです。 これは $load によって制御されています)、あまり使わないでしょう。
boolean unload();
boolean unload( string indexes );
load メソッドと逆の boolean 値を返します。 「読み込めなかったら」という方が使い易いので追加したメソッドです。
// クッキークラスのインスタンス生成
var visitordata = new Cookie( "counter" , 30 );

// count データが存在しない場合、visitordata のプロパティに count を追加
if( !visitordata.load( "count" ) ) visitordata.count = 0 ;
// unload を使うと if( visitordata.unload( "count" ) ) visitordata.count = 0 ;

// count をインクリメントする
visitordata.count++ ;

// クッキーに格納
visitordata.store();
クッキーへ格納 : store
void store();
設定された値全てをクッキーへ格納します。
var visitordata = new Cookie( "data" , 30 );

// count データが存在しない場合、visitordata のプロパティに count を追加
if( visitordata.unload( "count" ) ) visitordata.count = 0 ;
visitordata.count++ ;

// color データが存在しない場合、visitordata のプロパティに color を追加
if( visitordata.unload( "color" ) ) visitordata.color = "#000000" ;

// クッキーに count と color を格納
visitordata.store();
クッキーの削除 : remove( 引数なし )
void remove();
クッキーを削除します。
var visitordata = new Cookie( "data" , 30 );

// count データが存在しない場合、visitordata のプロパティに count を追加
if( visitordata.unload( "count" ) ) visitordata.count = 0 ;
visitordata.count++ ;

// クッキーに count 項目と count 値を格納
visitordata.store();

// データの削除、実際にはこんなことしないけど (^^);
visitordata.remove();
項目の削除 : remove( 引数あり )
void remove( string indexes );
indexes で指定したデータのみを削除します。
実際は指定したプロパティを delete 演算子を使い削除し、store メソッドを使って格納し直しています。
注 : 上で説明した引数なしとは全然意味が違うので注意して下さい。
var visitordata = new Cookie( "data" , 30 );

// count データが存在しない場合、visitordata のプロパティに count を追加
if( visitordata.unload( "count" ) ) visitordata.count = 0 ;
visitordata.count++ ;

// color データが存在しない場合、visitordata のプロパティに color を追加
if( visitordata.unload( "color" ) ) visitordata.color = "#000000" ;

// クッキーに count 項目とその値、color 項目とその値を格納
visitordata.store();

// 格納した color 項目とその値を削除します。
visitordata.remove( "color" );
標準出力文字列 : toString
string toString();
string toString( boolean v );
Cookie クラスの標準出力文字列を返します。
引数なし、または引数が false の場合、返される文字列はメンバ変数 $name のデータ全部です。
形式は $name + " : " + (データ項目) + "=" + (その値) + ", " + ・・・ です。
引数が true の場合、$document に格納された cookie 全てが文字列として返されます。
var cookie = new Cookie( "data" , 7 );

cookie.size  = 7 ;
cookie.color = "#000000" ;

cookie.store();

status = cookie ; // 結果は data : size=7, color=#000000 等

status = cookie.toString( true ); // 結果は data=size:7&color:#000000; counter=・・・等な

メソッド一覧

Cookie クラスで使用できるメソッドのリストです。
メソッド名説明
booleanloadクッキーの読み込み
booleanunloadクッキーの読み込み
voidstoreクッキーへ格納
voidremove(引数なし)クッキーの削除
voidremove(引数あり)項目の削除
stringtoString標準出力文字列

補足

■ クッキーの属性(インスタンス変数)について
Cookie クラスのインスタンス変数には $expiration,$path,$domain,$secure がありましたが、これらはクッキーの属性を表し、それぞれ、expires 属性、path 属性、domain 属性、secure 属性に対応しています。以下は「JavaScript 3RD」という書籍からの引用です。
 1つのクッキーには、寿命、表示/非表示の指定、セキュリティを制御するための省略可能な属性が4つあります。

 1番目の属性はクッキーの寿命を指定する expires 属性です。デフォルトとしては、クッキーの寿命は一時的であると設定されています。この場合Webブラウザのセッション中はクッキーの値が保持されますが、ユーザがブラウザを終了すると、クッキーの値も削除されます。このセッション期間を超えてクッキーを使いたい場合は、expires 属性に有効期限を指定します。有効期限を設定しておくと、ブラウザがクッキーをローカルファイルに保存してくれます。これで、ユーザが同じWebページにアクセスしたときに、元のクッキーが復元されます。有効期限が切れると、クッキーは自動的に削除されます。

 2番目の属性は、クッキーに関連付けられたWebページを示す path 属性です。クッキーに関連付けられアクセスが許されるWebページというのは、特に指定がなければ、そのクッキーを生成したWebページ、同じディレクトリ内にあるほかのWebページ、同じディレクトリ内のサブディレクトリにあるWebページになります。

 このことは、一般的に望ましいといえるでしょう。しかし、どのWebページがクッキーを作成したかどうかにかかわらず、マルチページのWebサイト全体でクッキー値を使いたい場合もあるでしょう。例えば、あるページのあるフォームでユーザがアドレスを入力したとしましょう。ユーザが次回そのページにアクセスしたときにそのアドレスをデフォルトとして使うために保存し、そのユーザがほかのページのフォームでアドレスの入力を要求された場合にデフォルトとして使用したいと考えるでしょう。そのような場合に、クッキーの path 属性を指定します。こうすると、指定されたパスがURLに含まれるWebページでこのクッキーが共有できます。例えば、あるWebページ ( http://www.hogehoge.com/foo/boo/index.html ) によって設定されたクッキーの path 属性に "foo" が設定されていた場合、このクッキーは http://www.hogehoge.com/foo/index.html からも見ることができます。path 属性に '/' が設定されていた場合、www.hogehoge.com サーバ上の全てのページから見ることができます。

 デフォルトでクッキーにアクセスできるのは、そのクッキーを設定したWebサーバーと同じWebサーバーのページに限られます。しかし、大規模なWebサイトの場合は、複数のWebサーバ全体でクッキーを共用したいことがあります。例えば、ドメイン aiueo.hogehoge.com にあるサーバがドメイン abcde.hogehoge.com からクッキー値を読み出したい場合は、どうすれば良いのでしょうか。

 3番目の domain 属性がここで登場します。ドメイン abcde.hogehoge.com にあるページで作成されたクッキーの path 属性に '/'、domain 属性に ".hogehoge.com" が設定されたいた場合、ドメイン aiueo.hogehoge.com 上の全てのページ、ドメイン abcde.hogehoge.com 上の全てのページ、ドメイン hogehoge.com 上にあるほかの全てのサーバにあるページからこのクッキーにアクセスできます。domain 属性が省略された場合は、対応するWebサーバーのホスト名が設定されます。尚、自分サーバのドメイン以外の名前をクッキーの domain 属性に設定することは出来ません。

 4番目の属性は、secure 属性です。secure 属性は、ネットワークを経由してクッキーを送る方法を規定した論理値です。デフォルトは、クッキーの安全性を保証しない設定になっています。これは、安全性が保証されない通常のHTTP接続経由でクッキーがやり取りされるという意味です。secure 属性に secure が設定されている場合、HTTPSなどの安全性が保証されたプロトコルでブラウザとサーバが接続された状態でのみクッキーがやり取りされます。

個人で使う分には expires 属性と path 属性だけ覚えておけば良いでしょう。
■ load( string indexes ) , unload( string indexes ) , remove( string indexes )
これらの引数の名前は全て複数形ですがこれには意味があります。
ややこしくなりそうだったので、説明しませんでしたが、これは複数指定できることを意味し、その場合 '|' で連結します。
例えば、load() メソッドであれば、これは引数で指定した項目があるかどうかを調べるメソッドですが、count と color を同時に調べたければ、load( "count|color" ); という風に書きます。この場合、一つでも存在しないものがあれば false が返されます。remove() メソッドも同じです。remove("count|color"); とかいう風に書きます。
■ Cookie クラスの簡単な使用方法
クッキーがどういうものかイマイチ分からない方もいらっしゃるのではないでしょうか。
クッキーについては 幕の内弁当 というサイトで詳しく説明されていますのでそちらを参考にして下さい。

↓の項で書いていますがこのスクリプトは他のものとは全然構造が違います。では、Cookie クラスの簡単な使い方を書いておきましょう。使い方にも依りますが、大まかな手順は以下です。

1.Cookie クラスのインスタンスを名前($name)を付けて作成(new)する。
2.クッキーを読み込むが、そのとき項目があるか調べ、なかったら設定する。
3.設定した項目とその値をクッキーに格納する。

これだけです。では実際のプログラムを見てみましょう。↓のプログラムはユーザに好きな色を入力してもらい、それを背景色とし、次回もそれを使うというものです。
<script>

// 1 の処理。名前は "favoritecolor" で、有効期限は 10 日としている。
var data = new Cookie( "favoritecolor" , 10 );

// 2 の処理。color という項目がなかったら、ユーザにデータ入力を求める。
// ここが他のものとの大きな違いで、項目を追加するとき data.* という形でプロパティに追加する。
// この時点ではクッキーの中身は何も変化しない。
if( data.unload( "color" ) ) data.color = prompt( "What is your favorite color ?" , "" );

// 3 の処理。ここで初めてクッキーに格納される。
// 格納される値はインスタンスに含まれる全てのプロパティ名とその値。
// 例えばこの場合であれば、項目は color で値は red 等
data.store();

// 背景色に設定
document.bgColor = data.color ;

</script>
簡単ですね。つまりデータを追加したいときは if( data.unload( "sample" ) ) とし、data.sample という形でプロパティを追加するということになります。そして、クッキーへ格納するときは data.store() です。

次はデータの削除です。これもプログラム的には簡単です。
削除には remove(引数なし) , と remove(引数あり) がありましたが、引数なしではクッキーごと削除されます。削除されるというよりかは内部では expires 属性を大昔に設定しているだけです。remove(引数あり) は設定された項目のみを削除します。例えば先ほど設定した color を削除したい場合は
data.remove( "color" );
とします。これを実行したあともう一度サイトを訪れるとデータ入力を求められます。
■ こりゃすげー(引用元スクリプト)
冒頭にこのクラスは引用したものと書きました。元スクリプト はこれですが、本当に素晴らしいものです。
僕はこんなかっこいい cookie クラスを見たことがありません。解説(コメント)もそのまま書いているのでじっくりこのスクリプトを見ることをお勧めします。ちなみにこれを機能同じで 私なりに書き換えたもの がこれです。