1.sessionStorage（一時ストレージ）
sessionStorage は、HTML5 の新しい Web Storage API の 1 つです。ブラウザにキーと値のペアのデータを保存するために使用されます。localStorage に似ていますが、sessionStorage に保存されているデータはセッションが終了するとクリアされます。
sessionStorage は次の方法で使用できます。
データの保存:
sessionStorage.setItem('キー', '値');
データを取得します:
sessionStorage.getItem('key');
データを削除します:
sessionStorage.removeItem('key');
すべてのデータをクリアします。
sessionStorage.clear();
sessionStorage は文字列型のデータのみを保存できるため、他の型のデータを保存する必要がある場合は、最初に文字列型に変換する必要があることに注意してください。
2. localStorage (永続ストレージ)
localStorage は、HTML5 の新しい Web Storage API の 1 つです。ブラウザにキーと値のペアのデータを保存するために使用されます。sessionStorage に似ていますが、localStorage に保存されたデータはセッションが終了しても消去されません。
localStorage は次の方法で使用できます。
データの保存:
localStorage.setItem('キー', '値');
データを取得します:
localStorage.getItem('key');
データを削除します:
localStorage.removeItem('key');
すべてのデータをクリアします。
localStorage.clear();
localStorage は文字列型のデータのみを保存できるため、他の型のデータを保存する必要がある場合は、最初に文字列型に変換する必要があることに注意してください。
3. クッキー
Cookie はクライアント側にデータを保存するメカニズムであり、document.cookie を通じて読み取りおよび設定できます。
Cookie の主な目的は次のとおりです。
セッション管理: Cookie を使用して、ユーザーのログイン状態の保存など、ユーザーのセッション状態を管理できます。
個人設定: Cookie を使用して、ユーザーの言語設定、テーマ設定などのユーザーの個人設定を保存できます。
ユーザーの行動の追跡: Cookie は、ユーザーの閲覧履歴や購入記録などの記録など、ユーザーの行動を追跡するために使用できます。
Cookie のサイズ制限は比較的小さく、通常は数 KB のデータしか保存できません。また、Cookie の保存方法は比較的単純で改ざんが容易であるため、機密情報の保存には適していないことに注意してください。機密情報を保存する必要がある場合は、localStorage または sessionStorage を使用することをお勧めします。
違い：
保存されたデータのライフサイクルは異なります。sessionStorage に保存されたデータはセッションの終了時にクリアされますが、localStorage に保存されたデータはセッションの終了時にクリアされません。
データの保存範囲は異なります。sessionStorage に保存されているデータは現在のセッションでのみ有効ですが、localStorage に保存されているデータは同じソースのすべてのウィンドウ間で共有されます。
保存されるデータのサイズ制限が異なります: sessionStorage と localStorage のサイズ制限は異なります。一般に、localStorage のサイズ制限は sessionStorage のサイズ制限よりも大きくなります。