【JavaScript】Cookie の設定がうまくいかない?

JavaScript では Cookie を扱うことができます。

Cookie はブラウザが保持できる文字列のことで、

これを使うことで、ユーザがページを再読み込みしたりブラウザから離れたりしてもデータを保持させることができます。

JavaScript で Cookie を扱う方法について、基本的なことはこちらに書かれています。

Cookies(クッキー), document.cookie

ただし、なぜか Cookie の設定がうまくいかないことがあります。


一度に2つ以上の値を設定できない

異なるキー:値のペアを2つ以上同時に登録することはできません。

複数指定された場合、最初のペアのみ登録されます。

1
// *NG
2
document.cookie = 'name=Mike; age=5; color=3';
3
console.log(document.cookie);
4
// -> "name=Mike"
5
6
// OK
7
document.cookie = 'name=Mike';
8
document.cookie = 'age=5';
9
document.cookie = 'color=3';
10
console.log(document.cookie);
11
// -> "name=Mike; age=5; color=3"

え?ドキュメントに次のような例があるじゃないか!

複数登録してるじゃないか!

document.cookie = 'user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT';

これはpathexpiresが特殊なオプションだからです。

特殊なオプションは同時に登録する必要があり、

別のところで登録することができません。


オプションは別のところで登録できない

そうか、2つ以上を同時に登録できないんだな。

じゃあオプションもあらかじめ登録しておくとか後から登録するとかなんだな。

1
// *NG
2
document.cookie = 'name=Mike';
3
document.cookie = 'age=5';
4
document.cookie = 'color=3';
5
6
document.cookie = 'max-age=3600';
7
document.cookie = 'secure';
8
console.log(document.cookie);
9
// -> "name=Mike; age=5; color=3; max-age=3600; secure"

document.cookieもいい感じじゃない?

と思ったら、これは適用されません。

max-agesecureは、その名前を持った、オプションとは別の値を指すと解釈されてしまいます。

デベロッパーツールを使って Cookie がどうなっているのか確認してみると、下のようになります。

Cookie 期限とsecureが設定されていない

Expires / Max-AgeのところはすべてSession(ブラウザが閉じると終了)となっていて、Secureもすべて空欄です。

これでは Cookie の有効期限が反映されず、ブラウザが閉じると終了してしまいます。

これが正しく設定されていると、Sessionの代わりに日付が書かれ、Secureの欄にチェックマークがつきます。


オプションは値ごとに登録する

この表を見ると気づくのですが、オプションは Cookie 全体に対して適用されるわけではなく、

Cookie の値ひとつひとつに対して適用されるようです。

正しい設定の仕方としては、次のようになります。

1
// OK
2
document.cookie = 'name=Mike; max-age=3600; secure';
3
document.cookie = 'age=5; max-age=3600; secure';
4
document.cookie = 'color=3; max-age=3600; secure';
5
console.log(document.cookie);
6
// -> "name=Mike; age=5; color=3"

localhostの場合は HTTPS ではないので、Cookie は登録されませんが、

デプロイすると登録されるようになります。)

以下はドキュメントのページの Cookie ですが、

Expires / Max-AgeSecureなどのオプションが正しく設定されています。

Cookie 期限とsecureが正しく設定されている場合

コンソールにdocument.cookieと打つことでも値を取得することはできますが、

オプションが正しく設定されているかどうかは確認できません。

より明確な情報を知るためには、

デベロッパーツールから Cookie の状態を調べます。

Chrome の場合

まず右クリックや F12 キーからデベロッパーツールを開きます。

次にApplicationのタブ(ない場合は>>から開けます)を開き、

Cookies から目的の Cookie を開けば内容を見る事ができます。

Chrome Cookie

Firefox の場合

まず右クリックや F12 キーからデベロッパーツールを開きます。

次にストレージのタブ(ない場合は>>から開けます)を開き、

Cookie から目的の Cookie を開けば内容を見る事ができます。

Firefox Cookie

参考になれば幸いです。

ではまた👋