[React] 再読み込みで増えないアクセスカウンターを作りたい(localStorage、sessionStorage)

この記事は、自分のウェブサイトにアクセスカウンターを実装する過程でできたものである。

自分のウェブサイト

アクセスカウンターを作る際、再読み込みをしてもカウントが増えないようにしたいと思うかもしれない。そんなとき使えるのが、localStorageとsessionStorageになる。
どちらもデータをブラウザに保存するものであるが、両者の違いは簡単にいうと以下の通り。

• sessionStorage: タブが開かれている間だけデータをブラウザに保存する
• localStorage: タブを閉じてもデータをブラウザに保存

sessionStorageを使えば再読み込みで増えないアクセス回数をカウントする仕様になり、localStorageを使えば基本1人1回のみアクセスをカウントする仕様になる。ちなみに、これらはコンソールから削除することができるので、localStorageを使っていてもアクセス数を意図的に増やすことは可能である。

コードは以下の通り。

const [isLoaded,setIsLoaded]=useState(sessionStorage.getItem("isLoaded"))
useEffect(()=>{
    //本番環境かつ、ストレージにアクセス済み情報が保存されていない場合
	if(process.env.NODE_ENV==="production"&&(!isLoaded)){
		access() //アクセスカウンターを増やし、カウント数を読み込む
		setisLoaded(true)
		sessionStorage.setItem('isLoaded',true) //アクセス済み情報を保存
	}else{
		getCount() //カウント数のみを読み込む
	}
},[])

process.env.NODE_ENVについては以下の記事で解説されている。
process.env.NODE_ENV ってなに？

access()とgetCount()は、今回はfireStoreを用いて実装した。

const access=async()=>{
    await updateDoc(doc(db, "access", "counter"), {
        count: increment(1)
    });
    await getCount()
}

const getCount=async()=>{
    const snap=await getDoc(doc(db, "access", "counter"));
    setAccessCount(snap.data()?.count)
}

Firebase・Cloud Firestoreの使い方については以下の動画や記事が参考になるかもしれない。

【2022最新版】Firebase入門！Reactと連携してデータベース接続をしてみよう

firebaseでincrementを使う(公式ドキュメント)

もし何か他にいい方法があれば、コメントで教えていただきたい。