🐱

jqueryでcookie情報を取得して一日一回だけスプラッシュを出す

2 min read

webアプリをその日初めてアプリを開いたときだけ(1日1回だけ)スプラッシュを出すための実装。

※フロントでcookie情報を取得して表示するこの実装だとクライアント側でキャッシュを消すと再度表示されてしまいますが、それは今回は考えないものとします。

行いたいこと

jqueryでブラウザのcookie情報を取得して、その日に初めてアプリが開かれる場合はスプラッシュを表示する。それ以外は表示しない。

※cookie情報の取得・更新のために、js-cookieを使います。
(よく検索で出てくるjquery.cookie.jsは現在サポート終了しているので注意)

失敗した方法

今回splash-containerというクラス名でスプラッシュを管理しています。mainクラスはmainタグの中身です。


$(function () {
  if (!Cookies.get('splash-container')) {
    $('.main').hide();
    $('.splash-container').show();
    setTimeout(() => {
      $('.splash-container').hide();
      $('.main').show();
    }, 3000);
    Cookies.set('splash-container', isOpen, {
      expires: 1,
      path: '/',
    });
  } else {
    $('.splash-container').hide();
    $('.main').show();
  }
});

上記で行っていることは、以下です。
①splash-containerのcookie情報を取得
②もし何も登録されていなければisOpenを付与(expiresを1日で設定することで情報は一日で更新されるようにする)、スプラッシュを表示したあとにメインコンテンツを表示する
③isOpenがある時は何も表示しない

これだと、PCで確認したときはうまく反映されていたのですが、スマホ(ios safari)で確認したときはexpires: 1の部分が機能していないようで、うまく反映できませんでした。

うまくいった方法


$(function () {
  const today = new Date(new Date().getTime());
  if (!Cookies.get('splash-container')) {
    $('.main').hide();
    $('.splash-container').show();
    setTimeout(() => {
      $('.splash-container').hide();
      $('.main').show();
    }, 3000);
    Cookies.set('splash-container', today, {
      expires: 1,
      path: '/',
    });
  } else if (today - Cookies.get('splash-container') >= 86400000) {
    $('.main').hide();
    $('.splash-container').show();
    setTimeout(() => {
      $('.splash-container').hide();
      $('.main').show();
    }, 3000);
    Cookies.set('splash-container', today, {
      expires: 1,
      path: '/',
    });
  } else {
    $('.splash-container').hide();
    $('.main').show();
  }
});

①splash-containerのcookie情報を取得
②もし何も登録されていなければ本日の日付を付与、スプラッシュを表示したあとにメインコンテンツを表示する
③上記の条件に加えて、cookie情報がある場合でも、本日の日付-cookie情報(前にcookieを登録した日時)で計算して、1日(86400000)以上時間が経っていたらスプラッシュを表示
④それ以外のときはスプラッシュを表示しない

これがいい方法なのかどうかは正直微妙ですが、なんとか頑張ってスプラッシュを1日1回だけ表示した話でした!

Discussion

ログインするとコメントできます