【JavaScript】オブジェクトのキーの中身と文字列が同じなのに比較した時にtrueになる時とならない時がある

Question

    const test_cookies_set_arr={"A":"a","B":"b"};

    //エスケープしてセット
    document.cookie="test_cokkie="+encodeURIComponent(JSON.stringify(test_cookies_set_arr));
    console.log(document.cookie);

    //エスケープしたものを取り出す
    const test_cookies = document.cookie;
    const test_cookiesArray = test_cookies.split(';');//配列にする

    for(let c of test_cookiesArray){
        const test_cArray = c.split('=');
        console.log(test_cArray[0]);
        console.log(test_cArray[0] == "test_cokkie");//trueにならない時がある
        if( test_cArray[0] == "test_cokkie"){ // 取り出したいkeyと合致したら
            console.log(JSON.parse(decodeURIComponent(test_cArray[1])));//同じはずなのにfalseになるから見れない…
        }
    }

説明

連想配列のデータをCookieに保存することには成功したが、中身を取り出そうとした時に

test_cArray[0] == "test_cokkie"

がtrueにならずこの現象が起きる。

ご教授お願いします。

追記

環境はXAMPPのサーバー上です。

Comments

[itagagaki]

console.log(document.cookie); で test_cokkie=・・・ が表示されていますか？

[dimyas]

はい、他のcookieと混ざって見分けがつきにくいですがちゃんと表示されています。

[itagagaki]

ん－、では
console.log(test_cArray[0]);
でも
test_cokkie
が表示されているのですか？
そしてもし
console.log(typeof(test_cArray[0]));
を入れたら
string
になっているのでしょうか？

[dimyas]

console.log(test_cArray[0]);
は
test_cokkie
と表示され
console.log(typeof(test_cArray[0]));
は
string
でした

console.log(test_cArray[0]);
の
test_cookie
が
" test_cookie"
と頭に半角スペースが入っていることに気づきました。

console.log(test_cArray[0].length);
console.log("test_cokkie".length);

を試すと文字数は
12
11
と表示されました。

なぜかcookieから取ってきた時に頭に半角スペースが入っていたみたいです。
document.cookie="test_cokkie="+・・・
で設定する時は半角スペースは入っていないのにおかしいですね...

文字列置き換えすればなんとかいけそうです。

代わりにローカルストレージを使ってやると普通にうまくいきました。

[itagagaki]

それなら
const test_cArray = c.split('=');
を
const test_cArray = c.trim().split('=');
にしたりすれば良さそうですね。

[dimyas]

ありがとうございます。

こういうやり方もあるんですね！！
https://maku77.github.io/js/string/split.html

ローカルストレージで作ったものをCookieでやれるように変えてきます。

Answer 1

const test_cArray = c.split('=');
を
const test_cArray = c.trim().split('=');
に変えるとうまくいきました。

ありがとうございました。