2016/4/13更新

JavaScriptでcookieを保存する方法

JavaScriptでcookieに値を保存するには、document.cookieを使用します。document.cookieに任意の名前と値をセットすることでdocument.cookieのプロパティに保存されます。デフォルトではセットした名前と値は使用したブラウザを終了した時点で消去されます。

document.cookieの使用法

document.cookie = "任意の名前=任意の値";

1	document.cookie = "任意の名前=任意の値";

名前と値のペアは複数個指定することができます。同じ名前を指定した場合、後でセットした値で上書きされます。

document.cookieの使用法をサンプルを使って説明します。

単純な文字列の保存

cookieはブラウザの設定時使用できないようにすることができるため、まず、cookieが使用できるか確認する必要があります。

navigator.cookieEnabled

1	navigator.cookieEnabled

navigator.cookieEnabledの戻り値がtrueの場合は使用可能、falseの場合は使用不可です。使用できる場合には、名前と値をセットすることでcookieに値を保存します。

if (navigator.cookieEnabled)  // cookieが使えるか確認
{
    document.cookie = "key1=123";
    document.cookie = "key2=ABC";
    alert(document.cookie);  // "key1=123; key2=ABC"
}

if (navigator.cookieEnabled) // cookieが使えるか確認

{

document.cookie = "key1=123";

document.cookie = "key2=ABC";

alert(document.cookie); // "key1=123; key2=ABC"

}

保存する値をエンコードする場合

cookieには"="、";"などの記号や日本語文字を保存できないため、encodeURIComponentを使ってエンコードした値をセットします。

if (navigator.cookieEnabled)  //cookieが使えるか確認
{
    document.cookie = "key=" + encodeURIComponent("abc;123");
    document.cookie = "name=" + encodeURIComponent("太郎");
    alert(document.cookie);  // key=abc%3B123; name=%E5%A4%AA%E9%83%8E
}

if (navigator.cookieEnabled) //cookieが使えるか確認

{

document.cookie = "key=" + encodeURIComponent("abc;123");

document.cookie = "name=" + encodeURIComponent("太郎");

alert(document.cookie); // key=abc%3B123; name=%E5%A4%AA%E9%83%8E

}

encodeURIComponentした値は、decodeURIComponentで元に戻すことができます。

if (navigator.cookieEnabled)  //cookieが使えるか確認
{
    document.cookie = "key=" + encodeURIComponent("abc;123");
    document.cookie = "name=" + encodeURIComponent("太郎");
    alert(decodeURIComponent(document.cookie));  // key=abc;123; name=太郎
}