jQueryで1日1回、初回アクセス時のみモーダルを表示するサンプル

1日の中で最初にアクセスした時のみモーダルを表示させるサンプルです。
初回アクセスかどうかはCookieを使って判別します。

CookieはjQueryのプラグインを使って簡単に操作できます。
今まで使っていた jquery.cookie.js はサポート終了して js-cookie に移行しているので、
今回はそちらを使って実装してみました。

仕様

• アクセス時にCookieを保存する
• 初回アクセス時（Cookieが保存されていない場合）のみモーダルを表示する
• 2回目のアクセス以降、Cookieが保存されている間はモーダルを表示しない
• 翌日の0時にCookieをリセット（有効期限切れ）する

js-cookie

Cookieの取得や保存を簡単に行うことができます。
基本的な書き方は以下の通り。

取得

Cookies.get('[名前]');

保存

Cookies.set('[名前]', '[値]', { expires: [有効期限] });

削除

Cookies.remove('[名前]');

サンプルコード

HTML

<script src="/js/js.cookie.min.js"></script>

JavaScript

$(function() {
	const date = new Date();
	date.setDate(date.getDate() + 1);
	date.setHours(0, 0, 0);
	if (Cookies.get('access_sample') == undefined) {
		Cookies.set('access_sample', 'access', { expires: date });
		$('.modal').fadeIn();
	}
});

Cookieの有効期限

初回アクセスかどうかを判別するため、有効期限付きのCookieを保存します。
有効期限はアクセスした日の翌日の0時とします。

const date = new Date();
date.setDate(date.getDate() + 1);
date.setHours(0, 0, 0);

date.getDate() + 1 で取得した日付（アクセスした日付）の翌日の日付にすることができます。
この際、11月30日から12月1日のように月をまたぐ場合も自動で計算してくれます。

これで date に「アクセスした日の翌日の0時」が格納されました。

Cookieの有無をチェック

Cookies.get() で保存されているCookieを取得することができます。
指定した名前のCookieが保存されていない場合、Cookieを保存してモーダルを表示します。

if (Cookies.get('access_sample') == undefined) {
	Cookies.set('access_sample', 'access', { expires: date });
	$('.modal').fadeIn();
}

Cookies.set() でCookieの名前、値、有効期限を指定して保存することができます。

expires はCookieの有効期限を指定できるオプションです。
変数で指定せずに数字で指定することも可能です。
例えば expires: 1 と指定すると1日（24時間）後が有効期限となります。

まとめ

簡単に操作できて便利すぎる。
頻度を変えたりモーダル以外の表示に使用したりできるので、ぜひ活用してください。