cookies.jsを使ってJavaScriptで簡単にクッキーを操作する

背景

あるサイトでトップページを開いた際にモーダルでキャンペーン情報を表示することになりました。
「モーダル画面を初回表示含め3回まで表示を行い、最終表示から5日経過したら状態をリセットする」
という要件の実現にJavaScriptからクッキーの登録を行い、その値でモーダル表示可否の判定を行おうと思いました。

MozillaのDocument.cookieのページを確認したところ文字列操作が面倒な印象を受けたので
同ページにひっそりとリンクの記載があったフレームワークを使用することにしました。

前提

ES6、jQuery、stylus

ソース

index.html

<div class="modal" id="modal">
    <div class="modal__bg"></div>
    <div class="_inner">
        <img src="some_img.png" alt="">
        <div class="modal__btn--close" id="btn_close_modal">
            <span>CLOSE</span>
        </div>
    </div>
</div>

top.js

// cookies.jsを保存したパスを記載
require('./libs/docCookies/cookies.js');

/**
 * モーダル表示前にクッキーの値のチェックを行う
 */
function checkPageLoadModalCookie(){

  // cookieのキーにしたい文字列
  const cookie = 'the_cookie';

  // 変数cookieに設定したキー名のクッキーの値を取得
  let check_cookie = docCookies.getItem(cookie);

  // キャンペーンモーダルを表示する回数
  const campaign_show_limit = 3;

  // クッキーが有効な日数
  const cookie_age_days = 5;
  // 日数を秒に変換
  const cookie_age_in_sec = 60 * 60 * 24 * cookie_age_days;

  // クッキーが取得可能になるパス; 今回は設定不要だったためnull
  const cookie_path = null;
  // クッキーが取得可能になるドメイン
  const cookie_domain = 'somedomain.com';

  if(!docCookies.hasItem(cookie)){ // 変数cookieがfalseの場合
    // モーダルを表示
    activatePageLoadModal();
    // クッキーの値に1をセット
    docCookies.setItem(cookie,1,cookie_age_in_sec,cookie_path,cookie_domain);
  }else if(docCookies.getItem(cookie) < campaign_show_limit){ // 変数cookieの値が表示回数上限に達していない場合
    activatePageLoadModal();
    // クッキーの値に1足す
    docCookies.setItem(cookie,++check_cookie,cookie_age_in_sec,cookie_path,cookie_domain);
  }

  // モーダル表示テスト用の処理
  // クッキー判定による表示切り替えを有効にする場合以下２行をコメントアウト
  // docCookies.removeItem(cookie);
  // console.log('モーダル表示のクッキー判定が無効になっています');
}
checkPageLoadModalCookie();

/**
 * ページ読み込み時に表示されるモーダルの動き
 */
function activatePageLoadModal(){
  // モーダルと閉じるボタンの要素を指定
  const modal = $('#modal');
  const close_modal = $('#btn_close_modal');

  // モーダルをフェードインさせたかったため、classを時間差で付与
  modal.addClass('active');
  setTimeout(function(){
    modal.addClass('show');
  },2000);

  // 閉じるボタンをクリックした場合
  close_modal.on('click',(e)=>{
    e.preventDefault();
    modal.removeClass('active');
  });

  // TOP キャンペーンモーダル背景のクリック
  modal.on('click', (e) => {
    // モーダル内の画像以外をクリックで発火
    if(modal.hasClass('active') && modal.hasClass('show') && !$(e.target).is('img') ) {
      modal.removeClass('active');
    }
  });
}

Despite officially defined in RFC 6265, the use of max-age is not compatible with any version of Internet Explorer, Edge and some mobile browsers. Therefore passing a number to the end parameter might not work as expected.

フレームワークの上記の記載の通り、IEやEdge、モバイルブラウザではmax-age（今回のソースではcookie_age_in_secを設定）が想定通りの動きをしない可能性があります。絶対時刻で設定すると良いそうですが、詳しい対応方法についてはフレームワークのsetItem>parameters>endのNotesをご確認ください。

_modal.styl

.modal{
  display none
  opacity 0
  transition opacity .5s ease

  &.active{
    display block
  }

  &.show{
    opacity 1
  }
}

jsに関係があるスタイルのみ記載しました。

参考

https://github.com/madmurphy/cookies.js
https://developer.mozilla.org/en-US/docs/DOM/document.cookie