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

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

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

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

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

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

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

Cookieに配列形式のデータを保存する関数を作成します。Cookieはテキストデータしか扱うことができないため、配列をそのまま保存することはできませんが、配列をJSONに変換することで文字列として保存することができます。配列→JSONはJSON.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は保存できるデータ容量が限られているのと、サーバーに送られるデータとなりますので取扱いに注意が必要です。もし大容量で、サーバー側にデータを送る必要がないのであればsessionStorageやlocalStorageの使用を検討するのも良いかなと思います。下記で使い方をご紹介していますので、良ければ見てみてくださいね。