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

こんにちは、ryohei(@ityryohei)です!

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

JavaScriptでCookieをsplitで配列にしたんだけど、値が取得できないな。どう対処すればいいんだろう。

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

では、解説してきます。

原因は半角スペース

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名で値の取得ができない場合の対処法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら