【JavaScript】Cookieをsplit()で配列にするとCookie名で値の取得ができなくなる

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでCookieをsplitで配列に分割すると、Cookie名を指定しても値が取得できないケースがあったので、事例と対処法をご紹介しています。

上記の疑問にお答えします。

では、解説してきます。

原因は半角スペース

Cookieは仕様上一つのテキストデータとしてブラウザ側に保存されています。具体的には下記のように保存されます。

testUser1={"name":"testUser1"}; testUser2={"name":"testUser1"}; testUser3={"name":"testUser1"}

上記のCookieを取り扱いやすくする方法として、split()を使用して配列化する方法があります。Cookieの配列化は基本的に下記の流れで行います。

• ⓵document.cookieでCookieを取得する
• ⓶取得したCookieをsplit(';')で配列に分割する
• ⓷split(';')で分割したにsplit('=')を実行し、キーと値の配列に分割する

下記が⓶のsplit(';')で分割した配列です。

0: "testUser1={\"name\":\"testUser1\"}"
1: " testUser2={\"name\":\"testUser1\"}"
2: " testUser3={\"name\":\"testUser1\"}"

さらに手順⓷でsplit('=')を実行すると、下記のような配列に分割されます。

"testUser1": {name: 'testUser1'}
" testUser2": {name: 'testUser1'}
" testUser3": {name: 'testUser1'}

上記を見てお気づきの方も多いと思いますが、配列のキー名の先頭に半角スペースが含まれています。添字[0]の配列は問題ないですが、添字[1]と添字[2]の配列のキーには先頭に半角スペースが含まれています。split(';')で文字列を分割して配列にしているため、半角スペースが残ったままになっているわけです。

半角スペースが残ったままになっていると、Cookie設定時に使用したCookie名と配列のキー名が変わるため、添字[1]以降は、配列からCookie名による値の取得できなくなってしまいます。

対処法

前項が原因で値が取得できない場合の対処法を2パターンご紹介します。

split()を実行する際に半角スペースも区切り文字の対象に含める

Cookieを文字列から配列に分割する際に、最初のステップとしてsplit(';')を実行します。split()は区切り文字を指定し、区切り文字の位置で文字列から配列にすることができるメソッドです。基本的にセミコロン「;」の位置で区切る方法が一般的ですが、セミコロン「;」と一緒に半角スペースも含めて分割します。

cookies = document.cookie;
cookiesArray = cookies.split('; ');

実行結果は下記のようになります。

0: "testUser1={\"name\":\"testUser1\"}"
1: "testUser2={\"name\":\"testUser1\"}"
2: "testUser3={\"name\":\"testUser1\"}"

添字[1]以降の配列の値に半角スペースが含まれていないため、Cookie名で値が取得できない原因を解決できます。

trim()して半角スペースを削除する

2つ目の方法は、前項の手順でご紹介した⓷の段階でtrim()を実行します。そうすることで半角スペースを削除することができます。

cookies = document.cookie;

if(cookies){
    cookiesArray = cookies.split(';');
    
    cookiesArray.forEach(data => {
        data = data.split('=');

        //半角スペース削除
        data[0] = data[0].trim(' ');

        result[data[0]] = JSON.parse(data[1]);
    });
}
console.log(result);
return result;

どちらの方法でも半角スペースを削除することができますので、参考にしていただければ幸いです。

最後に

最近サイトのお気に入りの機能を実装するため、Cookieをがっつり触る機会がありました。サーバーとの通信が必要なければLocalStorageやSessionStorageを使用しますが、携わった案件ではサーバー側でも値を取り扱う必要があったのでCookieを選択しました。

本記事の内容はお気に入り構築中に発生したのですが、Cookieをもう少し扱いやすくする方法はないかなーと思案中です。とりあえず困ったらStack Overflowなので、先輩方のコードを参考にCookieをより扱いやすくしていければなと思います。

※Cookieの設定・取得方法については下記のページでご紹介してます。参考にしていただければ幸いです。

以上、JavaScriptでCookieをsplit()で配列にするとCookie名で値の取得ができなくなるplitで分割した配列からCookie名で値の取得ができない場合の対処法のご紹介でした！