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

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

更新日:2022.09.09
826
JavaScript

JavaScriptでHTMLタグに属性を追加する方法

2023.01.08
6929
JavaScript

JavaScriptでHTMLの埋め込む場所を指定する方法

2022.10.17
967
JavaScript

【Webpack-Dev-Server】HTMLファイルを保存してもブラウザが自動リロードされない原因・対処方法

2023.01.14
1585