【javascript】簡単に初回アクセス時に処理を実行をさせよう！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div class="c-modal l-modal">
  <div class="c-modal__text">
    <p class="">
      初回アクセス時のみ表示されます。<br />（OKを押してリロードすると表示されません）
    </p>
  </div>
  <div class="c-modal__btn">
    <button class="c-btn">OK</button>
  </div>
</div>

.c-modal {
  background-color: #eeeeee;
  border-radius: 4px;
}
 
.c-modal__text {
  padding: 40px 20px;
  text-align: center;
}
 
.c-modal__btn {
  background-color: #cfcfcf;
  border-radius: 0 0 4px 4px;
  padding: 12px 40px;
}
 
.c-btn {
  background-color: #e45f2a;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  display: block;
  margin: auto;
  padding: 12px 40px;
}
 
.l-modal {
  left: 50%;
  margin: auto;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

$(function () {
  $.cookie("btnFlg") === "on" ? $(".l-modal").hide() : $(".l-modal").show();
  $(".c-modal__btn button").click(function () {
    $(".l-modal").fadeOut();
    $.cookie("btnFlg", "on", { expires: 30, path: "/" }); // Cookieを30日間保持
  });
});

<div id="modal" class="c-modal l-modal" style="display: none">
  <div class="c-modal__text">
    <p class="">
      初回アクセス時のみ表示されます。<br />（OKを押してリロードすると表示されません）
    </p>
  </div>
 
  <div class="c-modal__btn">
    <button id="btn" class="c-btn">OK</button>
  </div>
</div>

const sessionKey = "accessed";
const sessionValue = true;
 
// sessionStorageにsessionKeyというデータの有無を判別
if (!sessionStorage.getItem(sessionKey)) {
  // 初回アクセス時の処理
  document.getElementById("modal").style.display = "block";
  document.querySelector(".c-btn").addEventListener("click", () => {
    document.getElementById("modal").style.display = "none";
    // sessionStorageにデータを追加
    sessionStorage.setItem(sessionKey, sessionValue);
  });
} else {
  // ここに通常アクセス時の処理
  console.log("アクセス済み");
}