【Next.js】sessionStorageの実装方法

2023 3/04

2023年3月4日

Tomoki

はじめに

この記事ではNext.jsにおけるsessionStorageの実装方法について解説します。

Next.jsにおけるlocalStorageの実装方法は以下の記事で解説しています。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【Next.js】localStorageの実装方法この記事ではNext.jsにおけるlocalStorageの実装方法を解説しています。本記事を見るとNext.jsにおけるlocalStorageの実装方法がわかります。localStorageの実装方法がわか…

localStorageとsessionStorageの違いは以下の記事で解説しています。

Tomokiの技術ブログ

Tomokiの技術ブログ | 【JavaScript】localStorageとsessionStorageの違いこの記事ではlocalStorageとsessionStorageの違いを解説しています。本記事を見るとlocalStorageとsessionStorageの違いがわかります。 localStorageとsessionStorageの違…

sessionStorageの実装方法

Next.jsにおいてsessionStorageの実装方法を以下に示します。

useCounterというカスタムHooksを実装します。

このカスタムHooksでstorage_key_counterというキーに対して、setItemやgetItemを用いてsessionStorageとやりとりをしています。

"use client"
import useCounter from '../hooks/useCounter';

function HomePage() {
  const [count, setCount] = useCounter(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const clear = () => setCount(0);

  return (
    <div>
      <h1>sessionStorageのサンプル</h1>
      <p>{`カウント：${count}`}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={clear}>clear</button>
    </div>
  )
}

export default HomePage;

useCounterの呼び出し側です。

useCounterに初期値を指定するだけです。

後は、setCountをラップしたincrement、decrement、clear関数を定義してカウントを更新しています。

"use client"
import useCounter from '../hooks/useCounter';

function HomePage() {
  const [count, setCount] = useCounter(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const clear = () => setCount(0);

  return (
    <div>
      <h1>sessionStorageのサンプル</h1>
      <p>{`カウント：${count}`}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={clear}>clear</button>
    </div>
  )
}

export default HomePage;

動作確認結果は以下です。

0から2になっている箇所がありますが、ストレージにカウントが保存されているため、更新すると初期値の0から保存値である2にレンダリングしています。

localStorageは異なり、一度ブラウザを閉じるとセッションストレージはクリアされます。

再度別タブで開くと、初期値である0が表示されます。

よってsessionStorageは一時的(タブが閉じられるまで)にデータを保存することになります。

しかし、localStorageと同様に１つ問題があります。

それはsessionStorageから値を読み込むまでは初期値の0が表示されてしまいます。

上記を回避するために、useStateを使用してマウントされたかの状態を管理します。

一例ですが、マウントされるまではLoading…を表示するようにしています。

"use client"
import { useEffect, useState } from 'react';
import useCounter from '../hooks/useCounter';

function HomePage() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true);
  }, [])

  const [count, setCount] = useCounter(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const clear = () => setCount(0);

  if (!mounted) return <div>Loading...</div>

  return (
    <div>
      <h1>sessionStorageのサンプル</h1>
      <p>{`カウント：${count}`}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={clear}>clear</button>
    </div>
  )
}

export default HomePage;

動作確認は以下です。

マウントされるまではLoading…が表示されています。