SessionStorage を活用してトースト表示を制御する

トースト表示がリロードでかき消されたり、バックエンドからの通知が来る前に他のその他ミングでは適切でないトーストが表示されてしまったりなど、トースト表示の制御って意外と複雑で難しいですよね。

今回はこのようなトースト表示の制御をSession Storageを用いて行なった話を残します。

Session Storage とは？

ブラウザのタブが開いている間のみ、ブラウザ内部でデータを保持するという仕組みです。タブを閉じてしまうと保持はできなくなります。同一のタブ内ではデータが保持されますが、別のタブとの共有などはできません。

陥った現象

バックエンドからの403通知が届き、エラートーストが表示される前にフロントエンド側でリロードの処理が走ってしまい、エラー表示が出ずに勝手にエラーの処理が走っているという事象に陥りました。

この時、リロードで403通知が消えてしまっているため、Session Storageの活用が適切だという判断のもと、取り組みました。

実装方針と実装

BEからの403通知が来たタイミングでSessionStorageにデータを送り、リロード処理の後にSessionStorageからデータを取得&SessionStorage内のデータを削除する方針で実装していきます。

SessionStorageへデータを送信

403通知を受け取る部分で受け取ってすぐにSessionStorageへデータを送ります。

if (typeof window !== 'undefined') {
    sessionStorage.setItem(
        'pull-flash-data',
        JSON.stringify({
            data1: data1,
            data2: data2,
                .
                .
                .
        })
    );
}

データ取得のための処理関数

リロード後の処理の部分でSessionStorageからデータを受け取り、削除します。

実装の流れとしては、SessionStorageからデータを受け取り削除する関数を作成し、関数を受け取るタイミングで取り出したデータを格納します。

データのスキーマを作成

type PullFlashDataFromSessionStorage = {
  data1: schema1,
  data2: schema2,
          .
          .
          .
};

受け取り側でキーを作成します。このキーのSessionStorageのデータを一意に特定します。

const PULL_FLASH_DATA_KEY = 'pull-flash-data';

function pullFlashDataFromSessionStorage(): PullFlashDataFromSessionStorage | null {
  if (typeof window === 'undefined') return null;
  const raw = sessionStorage.getItem(PULL_FLASH_DATA_KEY);
  if (!raw) return null;
  try {
    const data = JSON.parse(raw) as PullFlashDataFromSessionStorage;
    sessionStorage.removeItem(PULL_FLASH_DATA_KEY);
    return data;
  } catch {
    sessionStorage.removeItem(PULL_FLASH_DATA_KEY);
    return null;
  }
}

以下の処理でSessionStorageからデータを受け取って現在のSessionStorage内のデータを削除します。

const flashDataFromSessionStorage = pullFlashDataFromSessionStorage();

これらの実装でSessionStorageへデータを送信して必要なタイミングで取得することができます。
この方法を駆使することでリロード前後でのデータの受け渡しをすることができるので、より柔軟に表示の操作ができるようになります。