Web Storage APIが利用可能か検証をする。

Web Storage APIであるlocalStorageとsessionStorageは、クライアントサイドで実行されるため、基本的には利用できる。しかし一部動作環境ではセキュリティの関係で無効化される場合があるので注意が必要だ。

Web Storage APIは、Safariのシークレットブラウザや、AndroidのWebView環境で無効化されることがある。

Web Storage APIが無効化されている環境では下記のエラーが発生することがある。
コード的にはlocalStorage.getItem()しているだけだが、クライアントサイドで無効化れていると、localStorageというオブジェクトが取得できないため出力されるエラーだ。

Cannot read properties of null (reading 'getItem')

Web Storage APIが利用可能か検証

localStorageとsessionStorageを使い分けていたので、共通関数にまとめてチェックするようにした。

function storageAvailable(type: "local" | "session"): boolean {
  try {
    const storage = window[`${type}Storage`];
    const x = "__storage_test__";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch  {
    return false;
  }
}

公式サイトのコードはこちらです。

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#testing_for_availability

公式サイトでは細かくチェックしていますが、利用可能かどうかを検証するだけなので最小限のコードにしました。

Android開発を見ると、Web Storage APIを無効化するオプションがあります。この辺りを考慮しておかないと気付かないうちにユーザーがエラーで閲覧できない、などが起こりえるので注意が必要です。