JavaScript におけるローカル ストレージとセッション ストレージを理解する

JavaScript のローカル ストレージとセッション ストレージ

ローカル ストレージ や セッション ストレージ などの Web ストレージ API は、ユーザーのブラウザにキーと値のペアを保存する簡単な方法を提供します。これらは HTML5 Web ストレージ仕様の一部であり、クライアント側 Web アプリケーションでデータを永続化するために使用されます。

1.ローカルストレージ

• データを 有効期限なしで保存します。
• ブラウザを閉じて再度開いた場合でも、データは保持されます。

主な機能:

• 最大ストレージ: ドメインあたり最大 5MB (ブラウザーによって異なります)。
• 同期 API (大きなデータの場合はメインスレッドをブロックする可能性があります)。
• 同じオリジンからのみアクセス可能です。

一般的な使用例:

• ユーザー設定 (テーマ、言語など) を保存します。
• ショッピング カート データを保持します。

例:

データを保存中:

localStorage.setItem("username", "JohnDoe");

データを取得しています:

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

データを削除しています:

localStorage.removeItem("username");

すべてのデータを消去します:

localStorage.clear();

2.セッションストレージ

• 現在のセッションのみにデータを保存します。
ブラウザのタブまたはウィンドウを閉じると、データは消去されます。

主な機能:

最大ストレージ: ドメインあたり最大 5MB (ブラウザーによって異なります)。
同期 API。
同じオリジンおよびブラウザ セッションからのみアクセスできます。

一般的な使用例:

一時データの保存 (ナビゲーション中のフォーム入力など)。
セッション固有の設定を追跡します。

例:

データを保存中:

sessionStorage.setItem("isLoggedIn", "true");

データを取得しています:

const isLoggedIn = sessionStorage.getItem("isLoggedIn");
console.log(isLoggedIn); // Output: true

データを削除しています:

sessionStorage.removeItem("isLoggedIn");

すべてのデータを消去します:

sessionStorage.clear();

3.ローカルストレージとセッションストレージの違い

4.複雑なデータの保存

ローカル ストレージとセッション ストレージはどちらもデータを文字列として保存します。オブジェクトのような複雑なデータを保存するには、JSON.stringify() と JSON.parse() を使用する必要があります。

例:

localStorage.setItem("username", "JohnDoe");

5.ベストプラクティス

1. 機密データの保存を避ける:

   • データはプレーン テキストで保存され、同じドメイン上の JavaScript からアクセスできます。
   • 機密データには安全な方法 (HTTP のみの Cookie など) を使用します。

2. ブラウザのサポートを確認してください:

   • ユーザーのブラウザがローカル ストレージとセッション ストレージをサポートしていることを確認します。

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

1. データサイズの制限:

   • パフォーマンスの問題を避けるために、重要なデータのみを保存します。

2. キーを賢く使用する:

   • 一意のキーを使用して、サードパーティのライブラリとの競合を防ぎます。

3. ストレージ使用量の監視:

   • ストレージ制限を超えないよう、利用可能なスペースを確認してください。

6.プログラムによるストレージのクリア

例:

localStorage.removeItem("username");

7.ストレージのデバッグと管理

最新のブラウザのほとんどは、ローカル ストレージとセッション ストレージを検査するための開発者ツールを提供しています。

手順:

1. 開発者ツールを開きます (F12 または右クリック > 検査)。
2. 「アプリケーション」タブに移動します。
3. [ストレージ] で、[ローカル ストレージ] と [セッション ストレージ] を表示します。

8.概要

以上がJavaScript におけるローカル ストレージとセッション ストレージを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。