クッキーはブラウザがサーバーにリクエストを送る際に情報を保持する仕組みです。

HTML5のWebストレージにはlocalStorage（永続ストレージ）とsessionStorage（セッションストレージ）の2つのAPIが提供されます。

Webストレージはクッキーの制約を克服することを目的としており、サーバーへの送信を伴わないクライアントサイドでのデータ操作に適しています。

共通点

• すべてブラウザに保存される
• 同一オリジンポリシーが適用される

主な違い

ライフサイクル

• クッキー：expires属性で有効期限を設定可能。設定なしの場合、ブラウザを閉じると削除
• localStorage：手動で削除しない限り永久に保持
• sessionStorage：ページセッション中だけ有効。ページを閉じると削除

保存容量

• クッキー：約4KBの制限
• Webストレージ：最大5MBまで保存可能

HTTP通信との関係

• クッキー：リクエストヘッダに自動付与され、過剰使用がパフォーマンスに影響
• Webストレージ：クライアント側のみで動作しサーバー通信しない

扱いやすさ

• クッキー：ネイティブAPIが扱いにくい
• Webストレージ：ネイティブメソッドが簡易的で、オブジェクト操作のカスタマイズも可能

使用ケース

• クッキー：ユーザー認証情報の維持
• localStorage：複数ページ間でのデータ共有
• sessionStorage：ページ再読み込み時の一時データ保持

実装例

// ローカルストレージへの保存
localStorage.setItem('userName', 'sampleUser');

// ローカルストレージの取得
const storedName = localStorage.getItem('userName');

// ローカルストレージの削除
localStorage.removeItem('userName');

// セッションストレージ操作例
const dataKey = 'tempData';
const value = 42;

sessionStorage.setItem(dataKey, value);
sessionStorage.setItem('counter', 100);

// 全データ取得
const allData = sessionStorage;
console.log(allData);

// 特定データ取得
const keyValue1 = sessionStorage.getItem(dataKey);
const keyValue2 = sessionStorage[dataKey];
console.log(keyValue1, keyValue2);

// 特定データ削除
sessionStorage.removeItem(dataKey);
console.log(sessionStorage);

// 全データクリア
sessionStorage.clear();
console.log(sessionStorage);