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

2020-07-222020-07-22

JavaScript

TypeScript

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

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

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

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

→ Cookies(クッキー), document.cookie

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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