WebStorageを理解していますか？（LocalStorage, SessionStorage, Cookie）

冒頭

現代のWeb開発では、クライアント側でデータを管理することが不可欠なスキルになっています。
例えば、筆者も最近、Cookieを用いて状態を保持し、その状態を用いてGTMにプロパティを送信する作業を行いました。
開発者は、多くの場合、LocalStorage、SessionStorage、および Cookie を使用して、ユーザーのブラウザにデータを保存しています。これら3つのメカニズムは同様の目的で使用することが多々ありますが、容量、永続性、および使用例の点で明確な違いがあります。今回の記事では例を挙げてこれらの違いを説明し、それぞれをいつどのように使用するかを述べていきたいなと思います。

LocalStorage

LocalStorageの特徴とデータ保持の用途

LocalStorageは、ブラウザを閉じた後も保持されるデータをクライアント側に保存するように設計されています。複数のセッションにわたって保持する必要があるデータに最適です。

容量

LocalStorageは、通常ドメインあたり最大10MBの十分なストレージスペースを提供しています。
これはほとんどのアプリケーションに十分な容量だと思います。

永続性

LocalStorageに保存されたデータは、ユーザーまたはアプリケーションによって明示的に削除されるまで利用することができます。そのため、テーマ設定など、サイトへの複数回のアクセスにわたって保持する必要があるユーザー設定を保存するのに最適です。
=> (LocalStorageはサイトへの再来訪が7日間ない場合はLocalStorageやCookieに内包されているvisitor_idが失効することにより同一ユーザとみなされなくなるみたいです。詳細は下記コメントにあるKARTEをご覧ください。benjuwanさん有難う御座いました。)

使用例

ライトモードとダークモードの両方を提供するWebアプリケーションなどに使用することがあるかなと思います。LocalStorageを使用してユーザーの設定を保存することで、次回ユーザーがサイトにアクセスしたときに、選択したモードで自動的に読み込まれるようにすることができます。

SessionStorage

SessionStorageの特徴とデータ保持の用途

SessionStorageもクライアント側にデータを保存しますが、ユーザがブラウザーのタブを閉じたり、ウインドウを閉じると、データはクリアされます

容量

LocalStorageと同様で、SessionStorageはドメインごとに約5MBのストレージを提供します。容量はLocalStorageと比較すると多少劣りますが、一時的なデータ保持には十分だと思います。

永続性

LocalStorageとSessionStorageには、データの保存期間に大きな違いがあります。SessionStorageの特徴とデータ保持の用途でも述べましたが、SessionStorageは、その名前の通り「セッション」を跨いでのデータ保存には向いていません。SessionStorageを使用するのは、現在のセッション内でのみデータを保持すればよい場合に適しています。

使用例

ユーザーが複数のページにわたってデータを入力する、複数ステップのフォームを想像してください。
SessionStorageを使用すると、ユーザーがステップを進むにつれてフォームデータを一時的に保存できます。これにより、ユーザーが誤ってページを再読み込みした場合でも、進行状況が失われることはありません。

Cookie

Cookieの特徴とデータ保持の用途

Cookieは、セッション間でよく使われます。HTTPリクエストでサーバに送信する小さなデータを保存するために使用されます。Cookieはユーザセッションの追跡、認証トークンの保存、ユーザ設定の記憶によく使用されます。

容量

Cookieの容量はLocalStorageやSessionStorageに比べてかなり小さく、4KBあたりの制限があります。ただし、この制限内であれば、複数のCookieを保存することができます。

永続性

有効期限を設定することができます。
セッションの終了時に期限切れになるか、指定された期間存続するかを選択することができます。
この柔軟性により、Cookieを短期的な保存かつ長期的な保存の両方に使用できます。

使用例

Cookieの一般的な用途は、ユーザーのログイントークンを保存することです。これにより、ユーザーはサイトにアクセスするたびに資格情報を再入力しなくても、セッション間でログインしたままにすることができます。

結論

各ストレージメカニズムを使用するタイミング

• LocalStorage
  複数のセッションにわたって保持される必要があり、機密性のない大量のデータ(ユーザー設定、機密性のないアプリケーション状態など) を保存する必要がある場合に最適です
• SessionStorage
  ユーザーのセッションの期間中のみ保持される一時データ(単一セッションのフォームデータ、一時状態など) に最適です
• Cookie
  HTTPリクエストでサーバーに送信する必要がある(バックエンドサーバやGTMなど)、または特定の有効期限が必要な小さなデータ (認証トークン、サーバーと対話する必要があるユーザー設定など) を保存するのに最適です。

最後に

LocalStorage、SessionStorage、Cookie の違いを理解することは、Webアプリケーションで適切な選択を行うために重要です。それぞれに長所と制限があり、それぞれをいつ使用するかを知ることで、より効率的にアプリケーションを構築できます。
この記事がよかったらいいねお願いいたします。