JavaScript で Cookie コードを読み書きする

JavaScript での Cookie の処理は、悪名高い粗末なインターフェイス (BOM の document.cookie プロパティ) のせいで少し複雑です。このプロパティのユニークな点は、使用方法に応じて動作が異なることです。属性値を取得するために使用される場合、 document.cookie は、現在のページで利用可能なすべての Cookie の文字列 (Cookie のドメイン、パス、有効期限、セキュリティ設定に基づく) を一連のセミコロンで区切られた名前と値のペアとして返します。次の例のように Shown:

name1=value1;name2=value2;name3=value3;

1 すべての名前と値は URL エンコードされているため、decodeURIComponent() を使用してデコードする必要があります。

設定に使用すると、document.cookie 属性を新しい Cookie 文字列に設定できます。この Cookie 文字列は解釈されて、既存の Cookie コレクションに追加されます。 document.cookie を設定しても、指定された Cookie がすでに存在しない限り、Cookie は上書きされません。 Cookie を設定する形式は次のとおりで、set-Cookie ヘッダーで使用される形式と同じです。のクッキーが必要です。簡単な例を次に示します。

document.cookie = "name=Nicholas";

このコードは、値が Nicholas の name という名前の Cookie を作成します。この Cookie は、クライアントがサーバーにリクエストを送信するたびに送信され、ブラウザを閉じると削除されます。このコードは名前も値もエンコードする必要がないので問題ありませんが、Cookie を設定するたびに以下の例のように使用するのが最善です

encodeURIComponent();

document.cookie = encodeURIComponent ( "name") + "=" + encodeURIComponent("Nicholas");

作成した Cookie の追加情報を指定するには、次のように Set-Cookie ヘッダーと同じ形式で文字列にパラメーターを追加するだけです。

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + ";domain=.wrox.com; path=/";

JavaScript による読み書きCookie はあまり直感的ではありません。Cookie の機能を簡素化するためにいくつかの関数を作成することがあります。 Cookie の基本操作には、読み取り、書き込み、削除の 3 つがあります。これらは、CookieUtil オブジェクト内で次のように表されます。

var CookieUtil = {
    get: function (name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1) {
            var cookieEnd = document.cookie.indexOf(";", cookieStart)
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    },
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += "; path=" + path;
        }
        if (domain) {
            cookieText += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    unset: function (name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

CookieUtil.get() メソッドは、Cookie の名前に基づいて対応する値を取得します。これは、document.cookie 文字列内の cookie 名と等号を検索することによって行われます。見つかった場合は、indexOf() を使用して、位置の後の最初のセミコロン (Cookie の終了位置を示します) を見つけます。セミコロンが見つからない場合は、Cookie が文字列の最後のものであり、ドメインの下の文字列はすべて Cookie 値であることを意味します。値は decodeURIComponent() を使用してデコードされ、最終的に返されます。 Cookie が見つからない場合は、null が返されます。

CookieUtil.set() メソッドは、ページに Cookie を設定し、いくつかのパラメーターを受け入れます: Cookie 名、Cookie 値、Cookie をいつ削除するかを指定するために使用されるオプションの Date オブジェクト、Cookie のオプションの URL、パス、オプションのフィールド、セキュアフラグを追加するかどうかを示すオプションのブール値。パラメータは使用頻度に従って順序付けされており、最初の 2 つだけが必要です。このメソッドでは、名前と値の両方が encodeURIComponent() を使用して URL エンコードされ、他のオプションがチェックされます。 expires パラメータが Date オブジェクトの場合、Date オブジェクトの toGMTString() メソッドを使用して Date オブジェクトが正しくフォーマットされ、expires オプションに追加されます。メソッドのもう 1 つの部分は、Cookie 文字列を作成し、それを document.cookie に設定することです。

既存の Cookie を直接削除する方法はありません。したがって、同じパス、ドメイン、セキュリティ オプションを使用して Cookie を再度設定し、有効期限を過去の時刻に設定します。 CookieUtil.unset() メソッドはこの種のことを処理できます。削除する Cookie の名前、オプションのパス パラメーター、オプションのドメイン パラメーター、およびオプションのセキュリティ パラメーターの 4 つのパラメーターを受け入れます。これらのパラメータに空の文字列を加え、有効期限を 1970 年 1 月 1 日に設定したもの (Date オブジェクトの値が 0ms に初期化される) が CookieUtil.set() に渡されます。これにより、Cookie が確実に削除されます。

これらのメソッドは次のように使用できます:

//设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional <a href="http://www.php1.cn/">JavaScript</a>");
//读值
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book")
//设置1个cookie，包括它的路径、域、截止日期
CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com", new Date("January 1, 2010"));
//删除同一cookie
CookieUtil.unset("name", "/books/projs/", "www.wrox.com");
//设置1个<a href="http://www.php1.cn/category/23.html">安全</a>cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);

これらのメソッドを使用すると、Cookie 文字列の解析と構築のタスクを処理することで、Cookie を使用してクライアント側でデータを保存することが容易になります