クッキーの読み書き

●書式
　Cookie にデータを書き出すには、document オブジェクトの cookie プロパティに値を代入します。値は閲覧者のコンピュータに、Webブラウザごと、及びドメインごと（'www.***.com' などの部分）に保存されます。保存場所は OS やバージョンによって異なりますが、強制的に決められた場所へ保存されるため、通常は意識する必要がありません。なお、Cookie で読み書きできるデータはテキスト形式に限られます。

document.cookie = key=value ; [ expires=date ;]
　（key...キー名（文字列）、　value...値（文字列）、　date...期限（GMT形式））

●key=value （キーと値 : 必須）
　key は保存するデータのキー名です。value はキーに対応する値です。保存の際、すでに同じキーがある時、値は上書きされます。 　この時、保存するデータは、安全な1バイト文字（半角英数）を前提としています。日本語のような２バイト文字は文字化けを起こしやすく、これを防ぐためには、エンコード、デコードの処理が別途必要になります。
　これには、escape, unescape の両メソッドがありますが、完全に文字化けを防げるわけではないようです。そのため、厳密な値が必要な時は、半角英数アンダーバー"_"に限って用いるなどした方が安全です。 ●expires （有効期限 : 省略可）
　expires　は Cookie の有効期限です。有効期限を過ぎると、データは自動的に削除されます。これを省略した場合、ブラウザを閉じるまでが有効期限となります。記述する場合は、GMT形式（グリニッジ標準時）かUTC形式（協定世界時）となります。これは Date オブジェクトの toGMTString 、または toUTCString メソッドで取得できます。 ●その他のオプション （省略可）
　上記の他にも、path, domain, secure といったオプションを指定できます。
　path は、URIのうち、パスの部分を指します。パス名でここに指定したものと一致するファイルすべてにCookie が適用されます。省略すると Cookie を設定した document と同じパスになります。ここで、path=/ とすると、ドメイン以下のすべてのパスに適用されます。同一サーバー上でドメインを共有で使用している場合は特に注意が必要です。
　domain は URI のうちドメイン部分を指定するものです。また、secure を指定すると、安全な接続に限って Cookie 情報が送信されます。

// JavaScript ソース

/* Cookie への書き出し
     引数 key　 : データキー （半角英数 _ のみ）
     引数 value : データの値（日本語可）
     引数 days  : データを保持する日数（ 0 の時は有効期限は省略）*/
function WriteCookie(key, value, days) {
     var str = key + "=" + escape(value) + ";";         // 書き出す値１ : key=value
     if (days != 0) {                                                 /* 日数 0 の時は省略 */
          var dt = new Date();                                   // 現在の日時
          dt.setDate(dt.getDate() + days);                   // days日後の日時
          str += "expires=" + dt.toGMTString() + ";"; // 書き出す値２ : 有効期限
     }
     document.cookie = str;                                   // Cookie に書き出し
}

// Cookie 書き出しサンプル

     // データ"NAME=むさし" を 0 日間保持（ブラウザ終了時に削除される）
     WriteCookie("NAME", "むさし", 0);

     // データ"COUNT=11" を 90 日間保持（90日を越えると削除される）
     WriteCookie("COUNT", "11", 90);

     // データ"DOG_NAME=べんけい" は保存されない（有効期限がマイナス）
     WriteCookie("DOG_NAME", "べんけい", -1);

●値の取得
　Cookie の読み込みは、document オブジェクトの cookie プロパティの値を取得することで得られます。ただし、この値は、複数の key と value のペアを ";" で区切った文字列となります。特定の key の値を取り出すには文字列の解析が必要となります。 ●文字列の解析
　Cookie の文字列を取得したら、String オブジェクトの split メソッドを使って、文字列を、key=value の要素に分離します。この時、区切り文字に";"を指定すると、key=value の文字列の配列を取得することができます。 　次に、取得した配列の要素（key=value）ごとにさらに key と value の二要素を持つ配列をつくりだします。やはり split メソッドを使用しますが、今度は区切り文字に "="を指定します。 　こうして key が取り出せますので、あとは key と比較して同一のものを探せば値が取り出せます。この時、２バイト文字の使用が想定されるなら unescape メソッドでデコードする必要があります。
　ただし、データ書き出しの際、key の先頭に半角スペースが自動挿入されている可能性がありますので、これを取り除く必要もあります。 　下記のサンプルでは、（ちょっとくどい方法ですが）正規表現オブジェクト RegExp と String オブジェクトの replace メソッドを使って対象語句のすべての半角スペースを取り除いています。

// JavaScript ソース

/* Cookie の読み込み
     引数 key : 求める値のキー
     戻り値　 : 値（ない時は空文字""）*/
function ReadCookie(key) {
     var sCookie = document.cookie;    // Cookie文字列
     var aData = sCookie.split(";");       // ";"で区切って"キー=値"の配列にする
     var oExp = new RegExp(" ", "g");   // すべての半角スペースを表す正規表現
     key = key.replace(oExp, "");          // 引数keyから半角スペースを除去

     var i = 0;
     while (aData[i]) {                           /* 語句ごとの処理 : マッチする要素を探す */
          var aWord = aData[i].split("=");                         // さらに"="で区切る
          aWord[0] = aWord[0].replace(oExp, "");              // 半角スペース除去
          if (key == aWord[0]) return unescape(aWord[1]); // マッチしたら値を返す
          if (++i >= aData.length) break;                          // 要素数を超えたら抜ける
     }
     return "";                                   // 見つからない時は空文字を返す
}

// Cookie 読み書きサンプル : 訪問回数の記録（キー : "COUNT"）

     // 読み込み
     var nCount = ReadCookie("COUNT");
     nCount = (!nCount)? 1: eval(nCount) + 1;

     // 書き出し（30日間保持）
     WriteCookie("COUNT", nCount, 30);	

　Cookie の削除は、有効期限に過去の日付を設定することで自動的に削除されます。したがって、前述の WriteCookie 関数の引数 days にマイナス値を当てれば該当キーの Cookie は削除されます。以下は別関数にした時のサンプルです。有効期限に現在の日時を設定して削除しています。

// JavaScript ソース

// Cookie の削除 （引数key : キー）
function DeleteCookie(key) 
{
     var dt = new Date();                                         // 現在の日時
     var str = key + "=;expires=" + dt.toGMTString(); // Cookie 文字列
     document.cookie = str;                                    // Cookie に書き出し
}

// Cookie の動作テスト
function TestCookie(mode) {
     var n;     // 値
     var s;     // 文字列
     if (mode == 1) {                 /* カウントの表示 */
          n = ReadCookie("COUNT");
          s = (!n)?  
               "COUNT はありません。": 
               "COUNT = " + n + " です。";
     } else if (mode == 2) {         /* カウントを増やす */
          n = ReadCookie("COUNT");
          n = (n == "") ? 1: eval(n) + 1;
          WriteCookie("COUNT", n, 0);
          s = "COUNT を一つ増やしました。COUNT = " + n;
     } else if (mode == 3) {          /* カウントの削除 */
          DeleteCookie("COUNT");
          s = (!ReadCookie("COUNT"))? 
               "COUNT を削除しました。": 
               "COUNT を削除できませんでした。";
     }
     document.form1.text1.value = s;
}

<!-- HTML ソース -->
<form name='form1'>Cookie動作テスト : 
     <input type='text' name='text1' style='width:20em;'/>
     <input type='button' value='カウントの表示' onclick='TestCookie(1)'/>
     <input type='button' value='カウントを増やす' onclick='TestCookie(2)'/>
     <input type='button' value='カウントの削除' onclick='TestCookie(3)'/>
</form>