目次

オブジェクトなJavaScriptの基礎講座

クッキーオブジェクト

◆ はじめに

クッキーは、ページ内の既存のデータやフォーム入力データ等をクライアント側(ブラウザを起動する側)のハードディスク内に記録する機能とその記録したデータをいいます。

JavaScriptには、cookieプロパティがありますが、登録と参照でフォーマットが違い、また、複数の設定クッキーをこの一つのプロパティで間に合わせているので、結構、扱いにくいプロパティになっています。

そこで、扱いやすくするために、このプロパティをオブジェクトで包んで使いやすくしてみましょう。

◆ そもそもクッキーとは？

少量のブラウザ内のデータをハードディスク内に記録するもので、記録してどうするかというと、以下の感じに使用します。

尚、通常のブラウザは、Cookie を受け付けるか受け付けないかの設定を以下のメニューで行うことが可能です。

ブラウザメニュー
IE6.x[ツール]→[インターネットオプション]→[プライバシー]
IE5.x[ツール]→[インターネットオプション]→[セキュリティ]→[レベルのカスタマイズ]→[Cookie]
NS6.x[編集]→[設定]→[プライバシーとセキュリティ]→[Cookie]
NS4.x[編集]→[設定]→[詳細]→[Cookie]

◆ クッキーの登録

document.cookie = "NAME=値; expires=値; domain=値; path=値; secure";

NAME=値; 以外は省略可能です。

  1. NAME=値
    任意の名前に任意な値を指定します。セミコロン(;)、カンマ(,)、空白文字( )や日本語を使用する際にはURLエンコードが必要です。
  2. expires=値
    クライアント側のディスクに記録されるCookieの有効期限を次のようなフォーマットで指定します。 
    Fri, 14-Dec-2001 23:59:59 GMT
  3. path=値
    path省略時のクッキー値は、クッキーを生成したWebページ、同じディレクトリ内のWebページ、同じディレクトリ内のサブディレクトリ内のWebページで参照が可能です。
    尚、パスの値を設定（path=値）すれば、それが、上記のようになります。
  4. domain=値
    domain省略時のクッキー値は、クッキーを生成したWebページのホストのみ参照が可能です。
    尚、ドメインの値を設定（domain=値）すれば、複数のサーバから参照ができます。ただし、自分のサーバーのドメイン以外は設定できません。
  5. secure
    secureを記述しなければ、クッキーの安全性が保証されていず（普通の場合です）、secureを記述すれば、httpsにてクッキー値が参照可能になるみたいです。

◆ クッキーの参照

alert(document.cookie);
NAME=値;NAME=値;NAME=値;・・・の形式になる。

上記のように、domainとpathの条件にあった、すべてのクッキーの"NAME=値"がdocument.cookieへ設定されます。

◆ クッキーオブジェクトサンプル

まぁ、上記のように「登録」も「参照」も、結構扱いにくい訳です。 そこで、「登録」は、NAME、値、保存日数のみの引数にして、日付の計算やクッキーフォーマット整形などはオブジェクトにまかせます。 また、「参照」の複数の「NAME=値」は、NAMEをオブジェクトの新たなプロパティとして追加して、対応する値をセットし、簡単にNAMEでクッキー値を参照できるようにします。

実は、前回紹介した、JCookie()は、このようなことを実現させています。ただ、一つだけ問題点があります。それは、CookieのNAMEの値は、=や;などの特殊記号や日本語文字はURLエンコードして書き込みをしなければなりませんが、その処理がありません。ですので、ちょっと改造して、新たなオブジェクト名（クラス名）をNJCookie()としました。

尚、URLエンコードは、escape関数で、デコードは、unescape関数を利用します。 

function NJCookie(){
        NJCookie.data = new Array(); // (1)
        NJCookie.string = (document.cookie) ? document.cookie.split(';') : new Array();// (2)
        for(var i = 0; i != NJCookie.string.length; i++) {  // (3)
            NJCookie.data[NJCookie.string[i].split('=')[0].match(/[^ ].*/)] 
                               =  unescape(NJCookie.string[i].split('=')[1]); //(4)
        }
        NJCookie.put = function(name ,data ,limit) { //(5)
             var date = ''; //(6)
             if (limit) {   //(7)
                 today = new Date(); //(8)
                 today.setTime(today.getTime()+1000*60*60*24*limit); //(9)
                 date = ';expires='+today.toGMTString(); //(10)
             }
             document.cookie = name+'='+escape(data)+date; //(11)
        }
}
new NJCookie(); //(12)

実行

クッキー登録（NAME=値を入力）

NAME: 値: 保存日数(半角でね）:

クッキー参照

クッキー登録した後に一度リロードしてください。（NJCookieオブジェクトを再活性化する）
そして、クッキー参照してください。

NAME:

解説

使用方法

まずは、ソースをカット＆ペーストし、ご自分のプログラムに組み込んでください。使い方以下の通りで、登録メソッドと参照プロパティの２つです。

補足

クッキー登録には制限があります。

  1. サイズは全体で4KBまで。 （このサイズを超えた場合は古いものから削除）
  2. 書き込むことができる総エントリー数は300まで。
  3. ドメイン名は最大20まで。

◆ おわりに

尚、本スクリプトの公開は、オリジナル作成者 Piro氏の許可を頂いております。ここに謹んでお礼申し上げます。
正確には、スタイルシート切り替え（オブジェクト指向）の時です。(^^;

前ページ / 次ページ

目次