【JavaScript】Cookieに配列形式のデータを保存・取得する

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

本記事では、JavaScriptでCookieに配列形式のデータを保存・取得する方法をご紹介しています。

JavaScriptでCookieに配列形式のデータを保存したり取得したりしたいな。良い方法ないかな?

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

では、解説していきます。

Cookieに配列形式のデータを保存する

Cookieに配列形式のデータを保存する関数を作成します。Cookieはテキストデータしか扱うことができないため、配列をそのまま保存することはできませんが、配列をJSONに変換することで文字列として保存することができます。配列→JSONJSON.stringify()で変換することができます。

参考:JSON.stringify()|MDN

下記はJSON.stringify()を使用してCookieに配列を保存する関数です。実行例、保存データ例もあわせて記載していますので、参考にしていただければと思います。

JavaScript

const setCookie = (name, json)=>{


    let cookie = '';
    let expire = '';
    let period = '';

    //Cookieの保存名と値を指定
    cookies = name + '=' + JSON.stringify(json) + ';';

    //Cookieを保存するパスを指定
    cookies += 'path=/ ;';

    //Cookieを保存する期間を指定
    period = 30; //保存日数
    expire = new Date();
    expire.setTime(expire.getTime() + 1000 * 3600 * 24 * period);
    expire.toUTCString();
    cookies += 'expires=' + expire + ';';

    //Cookieを保存する
    document.cookie = cookies;
};

関数実行例

const json = {
    name: 'Taro Tanaka',
    address: 'Tokyo',
    age: '99',
    email: 'info@example.co.jp'
};
setCookie('user', json);

保存データ例

名前:user
値:{"name":"Taro Tanaka","address":"Tokyo","age":"99","email":"info@example.co.jp"}
ドメイン:localhost
パス:/
Expires/Max-Age:2022-01-16T01:10:10.000Z
サイズ:84

上記ではオブジェクト(連想配列)形式のデータをJSONに変換して保存していますが、下記のように通常の配列を保存することもできます。環境に合わせてご変更ください。

const array = [0, 1, 2, 3];
setCookie('numbers', array);

以上でCookieに配列形式のデータを保存することができます。

Cookieのデータを配列形式で取得する

Cookieに保存した配列形式のデータを取得します。Cookieはセミコロン区切りでデータを保持しているので、各データに配列に分割し、その上でJSONを配列形式のデータに戻します。JSON→配列JSON.parse()で変換することができます。

参考:JSON.parse()|MDN

下記はJSON.parse()を使用してCookieを取得する関数です。関数実行例、実行結果例を記載していますので、参考にしていただければと思います。

JavaScript

const getCookie = ()=>{
    
    let cookies = '';
    let cookieArray = new Array();
    let result = new Array();

    //Cookieを取得する
    cookies = document.cookie;

    //Cookieを配列に分割してJSONに変換する
    if(cookies){
        cookieArray = cookies.split(';');
        
        cookieArray.forEach(data => {
            data = data.split('=');

            //data[0]: Cookieの名前(例では「user」)
            //data[1]: Cookieの値(例では「json」)

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

関数実行例

getCookie();

実行結果

user: {
    name: "Taro Tanaka",
    address: "Tokyo",
    age: "99",
    email: "info@example.co.jp"
}

以上でCookieのデータを配列形式で取得することができます。

最後に

本記事ではCookieを使用したデータの取り回しについてご紹介しました。Cookieは保存できるデータ容量が限られているのと、サーバーに送られるデータとなりますので取扱いに注意が必要です。もし大容量で、サーバー側にデータを送る必要がないのであればsessionStoragelocalStorageの使用を検討するのも良いかなと思います。下記で使い方をご紹介していますので、良ければ見てみてくださいね。

以上、JavaScriptで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のライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。