【Next.js】localStorageの実装方法

2023 3/03

2023年3月3日

Tomoki

はじめに

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

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

Tomokiの技術ブログ

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

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

Tomokiの技術ブログ

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

localStorageの実装方法

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

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

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

import { useEffect, useState } from 'react';

const STORAGE_KEY = 'storage_key_counter';

function useCounter(initialData: number): [count: number, setCount: (value: number) => void] {
    const [countInternal, setCountInternal] = useState(initialData);

    // 初期レンダリング直後にローカルストレージの設定を反映する。
    useEffect(() => {
        const count = localStorage.getItem(STORAGE_KEY)
        if (count !== null && count !== undefined) {
            setCountInternal(parseInt(count));
        } else {
            setCountInternal(0);
        }
    }, [])

    // 呼び出し時にローカルストレージにカウントを保存する。
    const setCount = (value: number) => {
        localStorage.setItem(STORAGE_KEY, value.toString())
        setCountInternal(value)
    }

    return [countInternal, setCount];
};

export default useCounter;

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>localStorageのサンプル</h1>
      <p>{`カウント：${count}`}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={clear}>clear</button>
    </div>
  )
}

export default HomePage;

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

カウントが保存されていることがわかります。これは一度ブラウザを閉じて再度開いても同様です。

よってlocalStorageは永続的にデータを保存します。

しかし、上記では１つ問題があります。

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

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

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

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>localStorageのサンプル</h1>
      <p>{`カウント：${count}`}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={clear}>clear</button>
    </div>
  )
}

export default HomePage;

動作確認は以下です。