【js】Cookieを利用してポップアップの表示と非表示を操作する実装

ある特定のページにリンクする要素を、トップページの目立つ箇所にポップアップで表示させるという依頼がありました。

クローズボタンをユーザーがクリックして非表示にした時、リロードのたびに表示されてしまうのではユーザー体験的によくありません。

そこでCookieを使ってユーザーが要素を非表示にしたら、一定期間表示させない実装をしてみました。

CodePen

See the Pen 【js】Cookieを利用してポップアップの表示と非表示を操作する実装 by konno1614 (@konnotes) on CodePen.

注意

筆者はMacを使っており、その環境から執筆時点でChromeとSafariとEdgeでは仕様上CodePen上からCookieを利用しての確認ができないようです。

FirefoxからだとCodePen上からでも確認ができるようです。

html

	popup
	x
<div id="popup" class="c-popup" style="display: none;">
    <a href="https://www.google.co.jp/" target="_blank">popup</a>
    <button id="popup-close">x</button>
</div>

表示させたい要素にid="popup"とstyle="display: none;

閉じるボタンにid="popup-close"

を設定してみてください。

css(scss)

.c-popup {
    padding: 1em;
    background-color: skyblue;
    border-radius: 10px;
    button {
        margin-left: 1em;
	&:hover {
            cursor: pointer;
	}
    }
}

スタイルは最低限なものを当てていますので、ご自身の環境や案件に応じて変更ください。

js

document.addEventListener("DOMContentLoaded", function () {
    // Cookieを取得
    function getCookie(name) {
        let matches = document.cookie.match(new RegExp(
            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }

    // Cookieを設定
    function setCookie(name, value, options = {}) {
        options = {
            path: '/',
            ...options
        };

        if (options.expires instanceof Date) {
            options.expires = options.expires.toUTCString();
        }

        let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

        for (let optionKey in options) {
            updatedCookie += "; " + optionKey;
            let optionValue = options[optionKey];
            if (optionValue !== true) {
                updatedCookie += "=" + optionValue;
            }
        }

        document.cookie = updatedCookie;
    }

    // 要素を表示する関数
    function showPopup() {
        const popup = document.getElementById('popup');
        if (popup) {
            popup.style.display = 'inline-flex';
        }
    }

    // 要素を非表示にする関数
    function hidePopup() {
        const popup = document.getElementById('popup');
        if (popup) {
            popup.style.display = 'none';
        }
    }

    // Cookieが存在しない場合、要素を表示
    if (!getCookie('popupClosed')) {
        showPopup();
    }

    // 閉じるボタンのクリックイベントを設定
    const closeButton = document.getElementById('popup-close');
    if (closeButton) {
        closeButton.addEventListener('click', function () {
            hidePopup();
            let date = new Date();
            date.setDate(date.getDate() + 7); // 7日間有効なCookieを設定
            setCookie('popupClosed', 'true', { expires: date });
        });
    }
});

61行目

date.setDate(date.getDate() + 7);

で7日間保持するようにしておりますので、この数字は適宜ご変更ください。

表示確認方法

ちゃんと実装できているか確認するために、実装後に閉じるボタンをクリックしてみましょう。

要素が消えた後に、リロードしてみて非表示のままであれば大丈夫です。

再び表示させて再度確認する方法をご紹介します。

なお、以下はChromeの画面となります。

検証ツールを使う方法

実装したid="popup-close"の要素をクリックすると

「ディベロッパーツール>アプリケーション>Cookie>自身のURL」

に「popupClosed」という名前が表示されます。（キャプチャ画像の青い丸で囲んだ箇所）

これを右クリックで「削除」を選択してから画面をリロードすると再び要素が表示されます。

閲覧履歴データを削除をする方法

「Chromeの画面右上の三点の設定ボタン>閲覧履歴データを削除」

からCookieを削除できます。

なお、期間に含まれる他のサイトも対象になるので、例えばログイン済みのサイトから弾かれてしまうのでご注意ください。

まとめ

Cookieを操作するのにjqueryを利用するjquery.cookie.jsも有名ですが、今回はjsだけで実装してみました。

ユーザー体験を向上させる工夫はできるように日々アンテナを張っておきたいです。