【React】でセッションストレージやローカルストレージのデータを取得する方法

2023年10月19日React

Reactでセッションストレージやローカルストレージのデータを取得する方法を紹介します。
セッションストレージでもローカルストレージでもやり方はまったく同じため、以下の例では、セッションストレージで紹介します。
localStorageの扱いが不安な場合は、【JavaScritpt】ブラウザ保存領域にデータを格納するlocalStorageの使い方を参考にしてみてください。

Reactでセッションストレージのデータを取得する方法

<div class="contents__container l-contents" id="mainContent"></div>

まずはマウントするためのhtmlを準備します。

App.jsなどルートのjsでそのままセッションストレージのデータを取得する場合

import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import Catalog from './catalog/Catalog';
import Sidebar from './catalog/Sidebar';
import OpenDownloadModal from './catalog/OpenDownloadModal';

function App() {
  const [cartItems, setCartItems] = useState([]); // カートアイテムの状態
  const [open, setOpen] = useState(false); // モーダルボタンの状態
  const [show, setShow] = useState(false); // サイドバーの表示状態

  // セッションストレージから保存されたカタログIDを取得し、重複を取り除く
  const storedCatalogIdsJSON = sessionStorage.getItem('catalogIds');
  const storedCatalogIds = storedCatalogIdsJSON
    ? JSON.parse(storedCatalogIdsJSON).map(id => parseInt(id))
    : [];
  const uniqueCatalogIds = [...new Set(storedCatalogIds)];

  // 初回レンダリング時にセッションストレージからカートアイテムを取得して初期化
  useEffect(() => {
    setCartItems(uniqueCatalogIds);
  }, []);

  // カートアイテムが変更されたときの処理
  useEffect(() => {
    if (cartItems.length === 0) {
      setOpen(false); // カートが空ならモーダルを閉じる
      setShow(false); // サイドバーを非表示にする
    } else {
      setOpen(true); // カートにアイテムがあればモーダルボタンを開く
    }
  }, [cartItems]);

  // カートにアイテムを追加する関数
  const handleAddToCart = catalogId => {
    setCartItems(prevCartItems => [...prevCartItems, catalogId]);
    setOpen(true); // モーダルボタンを開く
    setShow(true); // サイドバーを表示する
  };

  // カートからアイテムを削除する関数
  const handleRemoveFromCart = catalogId => {
    setCartItems(prevCartItems =>
      prevCartItems.filter(item => {
        return parseInt(item, 10) !== parseInt(catalogId, 10);
      })
    );
  };

  return (
    <>
      {/* Catalog コンポーネントに cartItems を渡す */}
      <Catalog cartItems={cartItems} onAddToCart={handleAddToCart} />
      {/* Sidebar コンポーネントに cartItems を渡す */}
      <Sidebar
        cartItems={cartItems}
        onRemoveFromCart={handleRemoveFromCart}
        show={show}
        toggleMenu={() => {
          setShow(!show);
        }}
      />
      {cartItems.length !== 0 && (
        <OpenDownloadModal
          cartItems={cartItems}
          open={open}
          toggleMenu={() => {
            setShow(!show);
          }}
        />
      )}
    </>
  );
}

const domNode = document.getElementById('mainContent');
const root = createRoot(domNode);
root.render(<App />);

まずセッションストレージに保存されているデータを取得するために、それを状態管理するためにuseStateを使います。
上の例ではcartItemsです。
そして、useEffectで第二引数を空にすることで、初回のレンダリング時にセッションストレージからカートアイテムを取得して初期化します。
これで、sessionStorageからデータを取得することができます。
あとは、cartItemsが更新されるたびに発火させたければ、上のようにuseEffectを別に作成して第二引数にcartItemsをいれます。

new Setで重複データを削除していますが、より詳しく知りたい場合は、JavaScriptの重複を消すことができるSetの使い方と具体例を参考にしてみてください。
あとは、自由に使いたいようにすればOKです。

上記の例では、セッションストレージに保存されたデータをReactの状態管理に取り込む方法を示しました。
React 19以降では、非同期データの取得や状態管理の改善が図られているため、以下のように`use`フックを使ってさらにシンプルに実装できます。

React 19で非同期データを取得する最新の方法


import React from 'react';
import { createRoot } from 'react-dom/client';
import Catalog from './catalog/Catalog';

async function fetchSessionStorageData() {
  const storedCatalogIdsJSON = sessionStorage.getItem('catalogIds');
  const storedCatalogIds = storedCatalogIdsJSON
    ? JSON.parse(storedCatalogIdsJSON).map((id) => parseInt(id, 10))
    : [];
  return [...new Set(storedCatalogIds)];
}

function App() {
  const cartItems = use(fetchSessionStorageData());

  return (
    <div>
      <Catalog cartItems={cartItems} />
    </div>
  );
}

const domNode = document.getElementById('mainContent');
const root = createRoot(domNode);
root.render();

`use`フックを使うことで、非同期処理をより直感的に扱えるようになりました。セッションストレージやローカルストレージからのデータ取得も簡潔に実現できます。

React V19から追加されたuseフックについては、useフックについてを参考にしてみてください。

React

Posted by devsakaso