プログラミング

【PR】を含みます。

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

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

JavaScriptでCookieの値に配列・オブジェクト(連想配列)を保存する方法と保存した配列・オブジェクトを取得する方法を紹介します。
時々フロントエンドの業務で使用することがあるため、コピペで使用できるよう関数にまとめました。

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

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

もくじCookieとは？Cookieを保存する方法保存する値にセミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要Cookieを削除(無効化)する方法過去の日付を指定して ...

コピペ用コード

Cookieの値に配列・オブジェクトを保存する関数

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

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

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

使用方法

setCookieObj()関数の使用方法

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

各引数について

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

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

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

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

使用例

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

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

getCookieObj()関数の使用方法

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

使用例

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

JavaSctipt
Copy
  1. let retrievedCookieObj = getCookieObj('test');
  2. console.log(retrievedCookieObj);

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-