はじめに

Webアプリケーションを開発する際、クライアント側にデータを保存する方法として「SessionStorage」「LocalStorage」「Cookies」の3つがよく使われます。それぞれの特徴や違いを理解し、適切に使い分けることで、アプリケーションの性能やセキュリティを最適化することができます。ここでは、これら3つのストレージの違いや、実際の利用シーンについて備忘録としてまとめてみました。

SessionStorage

概要

保存期間: ブラウザのタブが閉じられるまで
容量: 約5MB
スコープ: オリジン（ドメイン + プロトコル + ポート）
セキュリティ: JavaScriptからアクセス可能

特徴

SessionStorageは、特定のタブで開いている間だけデータを保持します。タブを閉じるとデータは自動的に削除されるため、一時的なデータ保存に適しています。

利用例

一時的なユーザー入力の保存: ユーザーがフォームを途中まで入力したが、ページ遷移やタブの操作が行われた場合でも入力データを保持しておきたい場合に利用します。
ステップごとのデータ保存: 複数ステップにわたるフォームなどで、ユーザーが各ステップごとに入力したデータを保存しておく場合。

// データの保存
sessionStorage.setItem('key', 'value');

// データの取得
const value = sessionStorage.getItem('key');

// データの削除
sessionStorage.removeItem('key');

LocalStorage

概要

保存期間: 永続的（ユーザーが削除するまで）
容量: 約5MB
スコープ: オリジン（ドメイン + プロトコル + ポート）
セキュリティ: JavaScriptからアクセス可能

特徴

LocalStorageは、ユーザーが手動でデータを削除しない限り、永続的にデータを保存します。容量がSessionStorageやCookiesに比べて大きいため、アプリケーション設定やユーザーのカスタマイズデータなど、長期間にわたって利用するデータの保存に適しています。

利用例

ユーザー設定の保存: ダークモード設定や表示言語設定など、ユーザーが再度アクセスしたときに同じ状態を維持したい場合。
アプリケーションのキャッシュ: オフライン時にアプリケーションを利用できるように、データをキャッシュとして保存する場合。

// データの保存
localStorage.setItem('key', 'value');

// データの取得
const value = localStorage.getItem('key');

// データの削除
localStorage.removeItem('key');

Cookies

概要

保存期間: 開発者が指定（セッション終了、または指定された期間）
容量: 約4KB
スコープ: ドメインとパスで制御可能
セキュリティ: HTTPOnlyオプションを使用することでJavaScriptからのアクセスを制限可能

特徴

Cookiesは、主にサーバーとクライアント間でのデータのやり取りに使用されます。HTTPリクエストごとに自動的に送信されるため、セッション管理やユーザー追跡に便利です。ただし、容量が非常に小さいため、少量のデータの保存に適しています。

利用例

セッション管理: ログイン状態を維持するためのセッションIDを保存する場合。
トラッキング: ユーザーのサイト訪問履歴をトラッキングするためのIDを保存する場合。

// Cookiesの設定
document.cookie = "username=John Doe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// Cookiesの取得
const cookies = document.cookie;

// Cookiesの削除
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

まとめ

特徴	SessionStorage	LocalStorage	Cookies
保存期間	タブが閉じるまで	ユーザーが削除するまで	指定された期間またはセッション
容量	約5MB	約5MB	約4KB
セキュリティ	JavaScriptからアクセス可能	JavaScriptからアクセス可能	HTTPOnlyオプションでJavaScriptアクセス制限可能
利用例	一時的なデータ保存	長期間のデータ保存	セッション管理、トラッキング

それぞれの特性を理解し、適切なシーンで使い分けることが、Webアプリケーションのパフォーマンスやセキュリティを向上させるために重要と思われる。