ブラウザに情報を保存する方法まとめ（In-Memory/Cookie/Local Storage/Session Storage）

はじめに

認証周りでブラウザに情報を保存する方法をいろいろ調べてみたまとめです。

主な保存方法

In-Memory

インメモリは、データをメモリ上に一時的に保存する方法を指します。データはブラウザのメモリ内に保存されるため、ページをリロードするとデータは失われます。したがって、インメモリは一時的にデータを保持するために使用され、ページのセッション中のみ有効です。一般的に、JavaScriptの変数や配列を使用してデータをインメモリに保存するようです。

Cookie

Cookieは、Webサイトがクライアント（ブラウザ）に情報を保存するための一般的な方法です。Cookieは、ブラウザによってユーザーのコンピュータに保存され、サーバーへのリクエストごとにサーバーに送信されます。Cookieはテキスト形式の小さなデータで、ユーザーの設定、識別子、セッション情報など、さまざまな情報を保存するために使用できます。また、有効期限を設定することができ、指定された有効期限までブラウザに保存されます。

Local Storage

ローカルストレージは、ブラウザにデータを永続的に保存するための仕組みです。ローカルストレージに保存されたデータは、ページの再読み込みやブラウザの再起動後も保持されます。ローカルストレージは、キーと値のペアでデータを保存し、JavaScriptを使用してデータにアクセスできます。Cookieよりも大容量のデータを保存することができますが、サーバーへのリクエスト時には自動的に送信されません。

Session Storage

セッションストレージもローカルストレージと同様に、ブラウザにデータを永続的に保存するための仕組みです。ただし、セッションストレージに保存されたデータは、ブラウザのセッション中にのみ有効です。したがって、セッションストレージは、ページの再読み込みやブラウザの再起動後にデータが失われます。ローカルストレージと同様にキーと値のペアでデータを保存し、JavaScriptを使用してデータにアクセスできます。

各方法の比較

	データの保持期間	データの容量	サーバーへの送信	データの永続性
In-Memory	セッション中のみ	数GB~	送信されない	非永続的
Cookie	指定された期間	4KB	リクエスト時	永続的
Local Storage	永続的	約5MB	送信されない	永続的
Session Storage	セッション中のみ	約5MB	送信されない	非永続的

• データの保持期間：データが保持される期間を示しています。
• データの容量：データの保存容量を示しています。
• サーバーへの送信：データがサーバーに送信されるかどうかを示しています。Cookieはリクエスト時に自動的に送信されますが、他のストレージ方法はデータを自動的に送信しません。
• データの永続性：データが永続的に保持されるかどうかを示しています。ローカルストレージとCookieは永続的にデータを保持しますが、インメモリとセッションストレージは非永続的で、セッション終了後にデータが失われます。