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.ローカルストレージとセッションストレージの違い

機能 ローカル ストレージ セッションストレージ

データの有効期間

Feature	Local Storage	Session Storage
Data Lifespan	Persistent	Cleared after session
Storage Size	~5MB	~5MB
Scope	Same-origin policy	Same-origin and session
Use Case	Long-term storage	Temporary/session storage

永続的 セッション後にクリアされました ストレージ サイズ ~5MB ~5MB スコープ 同一生成元ポリシー オリジンとセッションが同じ 使用例 長期保管 一時/セッション ストレージ テーブル>

---

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.概要

機能 ローカル ストレージ セッションストレージ

Feature	Local Storage	Session Storage
Persistent Storage	Yes	No
Accessible via JS	Yes	Yes
Data Scope	Origin	Origin Session

永続ストレージ はい いいえ

JS 経由でアクセス可能

はい はい

データスコープ

起源 オリジンセッション
ローカル ストレージとセッション ストレージは、クライアント側のデータ管理に不可欠なツールです。それぞれのベスト プラクティスをいつ使用するかを理解し、次のベスト プラクティスに従うことで、Web アプリケーションでの安全かつ効率的な実装が保証されます。

こんにちは、アバイ・シン・カタヤットです! 私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。 ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

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