Written by Kasumi

【JavaScript】初回アクセスのみ任意の処理を実行する方法

JavaScriptでサイトに初回アクセスがあった時のみ、任意の処理を実行したい。

本記事ではこのような悩みを解決します。

sessionStorageを使って、初回アクセスを判断する

const webStorage = function () {
  if (sessionStorage.getItem('visit')) {
    // アクセス済み
  } else {
    // 初回アクセス
    sessionStorage.setItem('visit', 'true'); // sessionStorageにデータを保存
    // 任意の実行処理
  }
}
webStorage();

JavaScriptで初回アクセス時のみ任意の処理を実行するコード例です。

JavaScriptとsessionStorageを使います。

sessionStorageとは

サイトへのセッション(訪問中)が続く間、ブラウザに一時的にデータを保存できるストレージの事です。

if文でsessionStorageにデータがあるか判断

if (sessionStorage.getItem('visit')) {
}else{
}

sessionStorage.getItem(‘key’)をif文の条件式に定義。

sessionStorageにデータが保存されてるか確認します。

データが無かったら初回アクセス。

有ったらアクセス済みという判断ができます。

初回アクセスがあったらsessionStorageにデータを保存

sessionStorage.setItem('visit', 'true');

前章if文のelse内でsessionStorage.setItem(‘key’, ‘value’);を記述。

初回アクセス時にif文の条件式で定義したsessionStorage.getItemと同じkeyに任意のデータを保存します。

続けてelse内で初回アクセス時に実行したい任意の処理を記述すれば完成です。

まとめ

JavaScriptで初回アクセスのみ任意の処理を実行する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでページの読み込み中、ローディング画面を表示する方法

2023.02.15
10681
JavaScript

JavaScriptでHTML要素(DOM)を動的に移動する方法

2022.10.13
8293
JavaScript

【JavaScript】コンストラクター関数を使ってオブジェクトの雛形を作成・インスタンス化する方法

2022.12.12
675
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
5065