【PR】を含みます。

フロントエンド

【JavaScript】Cookieの値に配列・オブジェクト(連想配列)を保存・取得する方法

JavaScript Cookieの値に配列・オブジェクト(連想配列)を保存・取得する方法

JavaScriptでCookieに配列やオブジェクトを保存したいと思ったことはありませんか？

通常のCookieは文字列しか保存できませんが、JSON.stringify()とJSON.parse()を組み合わせることで、配列やオブジェクトも簡単に保存・取得できます。

この記事では、コピペで使える実用的な関数とその使い方を詳しく解説します。

JavaScriptのCookieの基本的なことや検証ツールでCookieを確認する方法は以下の記事でまとめています。

あわせて読む
JavaScript Cookieを操作(保存・削除・取得・更新)する方法

【JavaScript】Cookieを操作(保存・削除・取得・更新)する方法

もくじCookieとは？Cookieの仕組みCookieのメリット・デメリットCookieと他のWebストレージの違いセキュリティ上の注意Cookieを保存する方法保存する値にセミコロン(;)、カンマ ...

【コピペOK】Cookieの値に配列・オブジェクトを保存する関数

JavaScript
Copy
// Cookieの値に配列・オブジェクトを保存する関数
function setCookieObj(cookieName, cookieValue, cookiePath = '', cookieExpires) {
  try {
    let jsonStr = JSON.stringify(cookieValue);
    if (cookieExpires) {
      document.cookie = cookieName + '=' + encodeURIComponent(jsonStr) + '; path=' + cookiePath + '; expires=' + new Date(cookieExpires).toUTCString() + ';';
    } else {
      //有効期限が設定されてない場合、セッションクッキーとする
      document.cookie = cookieName + '=' + encodeURIComponent(jsonStr) + '; path=' + cookiePath + ';';
    }
  } catch (error) {
    //エラー時の処理
    console.log('保存時にエラーが発生しました。', error);
  }
}

setCookieObj()関数の使用方法

第一引数のcookieNameにCookie名と第二引数のcookieValueに配列・オブジェクトを指定することで、Cookieの値にオブジェクトを保存することができます。

各引数について

  1. cookieName (必須)
    クッキー名を指定します。

  2. cookieValue (必須)
    クッキーの値に保存したい配列・オブジェクトを指定します。

  3. cookiePath
    クッキーが有効なパスを指定できます。
    パス設定がない場合、デフォルトで空文字列が指定されており、クッキーはウェブサイト全体で有効となります。

  4. cookieExpires
    クッキーの有効期限を指定できます。
    有効期限が設定されていない場合、クッキーはセッションクッキーとして扱われ、ブラウザが閉じられると自動的に削除されます。

使用例

下記コードは有効期限を1日後に設定し、Cookie名testにtestObj（オブジェクト）を保存しています。

JavaScript
Copy
const testObj = {
  a: 'aa',
  b: 'bb',
  c: 'cc',
};
// クッキーの有効期限を1日後に設定
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
setCookieObj('test', testObj, '/', expirationDate);

【コピペOK】Cookieの値に保存してある配列・オブジェクトを取得する関数

JavaScript
Copy
// Cookieの値に保存してある配列・オブジェクトを取得する関数
function getCookieObj(cookieName) {
  try {
    let name = cookieName + '=';
    let decodedCookie = decodeURIComponent(document.cookie);
    let cookieArray = decodedCookie.split(';');
    for(let i = 0; i < cookieArray.length; i++) {
      let cookie = cookieArray[i].trim();
      if (cookie.indexOf(name) === 0) {
        let jsonStr = cookie.substring(name.length, cookie.length);
        return JSON.parse(jsonStr);
      }
    }
    //指定されたクッキーが見つからない場合「null」を返す
    return null;
  } catch (error) {
    //エラー時の処理
    console.log('取得時にエラーが発生しました。', error);
    return null;
  }
}

getCookieObj()関数の使用方法

第一引数のcookieNameに取得したいCookie名を指定することで、Cookieに保存してある配列・オブジェクトを取得できます。

使用例

下記コードは、Cookie名testに保存してあるオブジェクトを取得し、変数retrievedCookieObjに格納しています。

JavaScript
Copy
let retrievedCookieObj = getCookieObj('test');
console.log(retrievedCookieObj);

まとめ

JavaScriptでCookieに配列・オブジェクトを保存・取得する方法を解説しました。

Cookieは文字列しか保存できませんが、JSON.stringify()とJSON.parse()を使うことで、複雑なデータ構造も扱えます。

この記事で紹介したsetCookieObj()とgetCookieObj()関数を使えば、フロントエンド開発でよく必要となるデータの保存・取得が簡単に実装できます。

紹介したコードはコピペで使用できるので、ぜひ実際のプロジェクトで活用してみてください。

JavaScriptのCookieの基本的なことや検証ツールでCookieを確認する方法は以下の記事でまとめています。

あわせて読む
JavaScript Cookieを操作(保存・削除・取得・更新)する方法

【JavaScript】Cookieを操作(保存・削除・取得・更新)する方法

もくじCookieとは？Cookieの仕組みCookieのメリット・デメリットCookieと他のWebストレージの違いセキュリティ上の注意Cookieを保存する方法保存する値にセミコロン(;)、カンマ ...

-フロントエンド
-