W3CSchool の機能が間違っています。次のような同じサフィックスを持つ複数の Cookie がある場合、失敗します。
ffoo=bar; foo=baz
検索すると、 fooではなくffoofoo
の値が返されます。
ここで私がすべきことは次のとおりです。まず、Cookie の転送方法の構文を理解する必要があります。Netscape の元の仕様 (このような haxx.seのようなコピーしか入手できません) では、セミコロンを使用して複数の Cookie を区切りますが、各名前/値のペアには次の構文があります。
NAME =
VALUE
この文字列は、セミコロン、コンマ、空白を除く一連の文字です。このようなデータを名前または値に配置する必要がある場合は、URL スタイル エンコーディングなどのエンコーディング メソッド%XX
が推奨されますが、エンコーディングは定義されていないか、必須ではありません。
したがってdocument.cookie
、セミコロンまたはコンマで文字列を分割することは実行可能なオプションです。
それに加えて、RFC 2109では、Cookie をセミコロンまたはコンマで区切ることも指定されています。
cookie = "Cookie:" cookie-version
1*((";" | ",") cookie-value)
cookie-value = NAME "=" VALUE [";" path] [";" domain]
cookie-version = "$Version" "=" value
NAME = attr
VALUE = value
path = "$Path" "=" value
domain = "$Domain" "=" value
どちらも使用できますが、HTTP のリスト アイテムのデフォルトの区切り文字であるため、コンマを使用することをお勧めします。
;
注: 下位互換性のために、Cookie ヘッダーの区切り文字はどこでもセミコロン ( ) です。,
サーバーは、将来の互換性のために、Cookie 値間の区切り文字としてカンマ ( ) も受け入れる必要があります。
さらに、 RFC 2616で指定されているように、 VALUEは引用符で囲まれた文字列にすることもできるため、名前と値のペアにはさらにいくつかの制限があります。
attr = token
value = token | quoted-string
したがって、これら 2 つの Cookie バージョンは別々に処理する必要があります。
if (typeof String.prototype.trimLeft !== "function") {
String.prototype.trimLeft = function() {
return this.replace(/^\s+/, "");
};
}
if (typeof String.prototype.trimRight !== "function") {
String.prototype.trimRight = function() {
return this.replace(/\s+$/, "");
};
}
if (typeof Array.prototype.map !== "function") {
Array.prototype.map = function(callback, thisArg) {
for (var i=0, n=this.length, a=[]; i<n; i++) {
if (i in this) a[i] = callback.call(thisArg, this[i]);
}
return a;
};
}
function getCookies() {
var c = document.cookie, v = 0, cookies = {};
if (document.cookie.match(/^\s*\$Version=(?:"1"|1);\s*(.*)/)) {
c = RegExp.$1;
v = 1;
}
if (v === 0) {
c.split(/[,;]/).map(function(cookie) {
var parts = cookie.split(/=/, 2),
name = decodeURIComponent(parts[0].trimLeft()),
value = parts.length > 1 ? decodeURIComponent(parts[1].trimRight()) : null;
cookies[name] = value;
});
} else {
c.match(/(?:^|\s+)([!#$%&'*+\-.0-9A-Z^`a-z|~]+)=([!#$%&'*+\-.0-9A-Z^`a-z|~]*|"(?:[\x20-\x7E\x80\xFF]|\\[\x00-\x7F])*")(?=\s*[,;]|$)/g).map(function($0, $1) {
var name = $0,
value = $1.charAt(0) === '"'
? $1.substr(1, -1).replace(/\\(.)/g, "$1")
: $1;
cookies[name] = value;
});
}
return cookies;
}
function getCookie(name) {
return getCookies()[name];
}
出典: https://stackoverflow.com/a/4004010