JavaScriptで値が空文字のcookieを取得したときのブラウザ間の違い

JavaScript で値が空文字のcookieを取得したとき、Chrome や Safari、Firefox では空文字("")が返ってきますが、Internet Explorer (テストしたのは IE8)では undefined が返ってきます。

例えば、次のような setCookie 関数で "testcookie" という名前で空文字をセットします。

setCookie("testcookie", "", 1);
function setCookie(key, val, days){
    var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(val);
    if(days != null){
        var expires = new Date();
        expires.setDate(expires.getDate() + days);
        cookie += ";expires=" + expires.toGMTString() + '; path=/;';
    }
    document.cookie = cookie;
}

これを次のような getCookie 関数で取得して alert で表示してみると、Chrome や Safari、Firefox では空文字となりますが、IE では undefined という文字列が表示されます。

getCookie1 を試す

function getCookie1(key) {
    if(document.cookie){
        var cookies = document.cookie.split(";");
        for(var i = 0; i < cookies.length; i++){
            var cookie = cookies[i].replace(/\s/g,"").split("=");
            if(cookie[0] == encodeURIComponent(key)){
                return decodeURIComponent(cookie[1]);
            }
        }
    }
    return "";
}

なので、IEでもちゃんと空文字になるようにするには、以下のように変更すれば良いと思います。

getCookie2 を試す

function getCookie2(key) {
    if(document.cookie){
        var cookies = document.cookie.split(";");
        for(var i = 0; i < cookies.length; i++){
            var cookie = cookies[i].replace(/\s/g,"").split("=");
            if(cookie[0] == encodeURIComponent(key)){
                var value = "" + decodeURIComponent(cookie[1]);
                return (value == "undefined" || value == "null" || value == "") ? "": value;
            }
        }
    }
    return "";
}
  • このエントリーをはてなブックマークに追加
Just a second...