特定の要素を初回アクセス時のみ表示させる方法|loading画面など

今回はloading画面などの特定の要素を初回アクセス時のみ表示する方法を紹介します。

ただし、ブラウザを閉じた後に再度サイトにアクセスした時は再び表示するようにします。ユーザーがサイト内のページを巡回している間は表示しないということですね。

 

初回アクセス時のみ表示するコード

全体のコードは以下のようになります。スクリプトは別のjsファイルに書いて読み込んでも構いません。

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", () => {
    if (sessionStorage.getItem("visited")) {
        document.getElementById("test01").remove();
    } else {
        sessionStorage.setItem("visited", 1)
    }
});
</script>
</head>
 
<body>
<section>
<div id="test01">初回のみ表示</p>
<div id="test02">常に表示</p>
</section>
</body>

 

HTMLは初回のみ表示させたい要素をdivなどで囲っておきましょう。

addEventListenerの引数にDOMContentLoadedを渡し、ページが読み込まれた時に処理を行います。

sessionStorageはブラウザが開いている間のみにデータを保存できます。getItemでデータを取得し、初回アクセス時のみ表示、それ以外は非表示とします。

 

#id=”test01″にローディング画面を作れば初回アクセス時のみローディング画面を表示することができます。

ローディング画面以外にも使い方は色々あると思うので、試してみてください。