[JavaScript] cookieに値をセットする

投稿日：2016年10月6日更新日：2018年5月3日

cookieに値をセットするサンプルです。

サンプルソース

例）cookieに値をセットする

//キー"pref01"／値"Hokkaido"、キー"pref02"／値"Aomori"　をクッキーにセットする
document.cookie = "pref01=Hokkaido";
document.cookie = "pref02=Aomori";
※２回続けて書くと１つめのが上書きされてしまいそうですが大丈夫です。

//セミコロン区切りで続けて指定してもOK
document.cookie = "pref01=Hokkaido;pref02=Aomori";

//値はencodeURIComponentでエンコードしてからセットした方が安全。
document.cookie = "pref01=" + encodeURIComponent("Hokkaido");
document.cookie = "pref02=" + encodeURIComponent("Aomori");
※エンコードしてセットした場合は、取得時はdecodeURIComponentでデコードする必要あり。

//キー"pref01"／値"Hokkaido"、キー"pref02"／値"Aomori"　をクッキーにセットする

document.cookie = "pref01=Hokkaido";

document.cookie = "pref02=Aomori";

※２回続けて書くと１つめのが上書きされてしまいそうですが大丈夫です。

//セミコロン区切りで続けて指定してもOK

document.cookie = "pref01=Hokkaido;pref02=Aomori";

//値はencodeURIComponentでエンコードしてからセットした方が安全。

document.cookie = "pref01=" + encodeURIComponent("Hokkaido");

document.cookie = "pref02=" + encodeURIComponent("Aomori");

※エンコードしてセットした場合は、取得時はdecodeURIComponentでデコードする必要あり。

//30日の秒数を取得してセットする
var exp = 60 * 60 * 24 * 30;
document.cookie = "max-age=" + exp;

//30日の秒数を取得してセットする

var exp = 60 * 60 * 24 * 30;

document.cookie = "max-age=" + exp;

解説

cookieへの値セットは、document.cookieに、「キー=値」の形式で値をセットすればOKです。
但しブラウザ側でcookieを有効にしていないとエラーにはなりませんが、セットされません。
有効期限を設定しない場合は、ブラウザが閉じられるまで有効です。
有効期限はブラウザ側の設定値が優先されますので、ブラウザの設定値より長い有効期限を設定してもブラウザの設定値が有効期限となります。

執筆者：とら