ウェブストレージの概要

Web ストレージは、クライアント側にデータを直接保存できる最新のブラウザの強力な機能です。このデータは、ブラウザを閉じた後でも (LocalStorage を使用)、またはセッション中にのみ (SessionStorage を使用) 保持できます。これらのツールは、ユーザー設定、ショッピング カート データ、およびユーザー エクスペリエンスを向上させるその他の種類の情報を保存するのに非常に貴重です。

LocalStorage と SessionStorage の違い

LocalStorage と SessionStorage の違いを理解することが、効果的に使用するための鍵となります:

• ローカルストレージ:

  • ブラウザを閉じた後もデータは保持されます。
  • ユーザー設定やトークンなどの長期データの保存に使用できます。
  • 保存されたデータには有効期限がなく、明示的に削除されるまで利用可能なままです。

• セッションストレージ:

  • データはセッション中 (つまり、タブまたはブラウザ ウィンドウが開いている間) にのみ使用できます。
  • セッションが終了すると (タブが閉じられると)、データは自動的に消去されます。
  • セッション固有のユーザー操作や選択などの一時データに役立ちます。

データの保存、取得、削除

LocalStorage と SessionStorage の使用は簡単です。以下は、データを保存、取得、削除する方法を示す例です。

// Storing data
localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('sessionID', '123456');

// Retrieving data
const username = localStorage.getItem('username');
const sessionID = sessionStorage.getItem('sessionID');

// Removing data
localStorage.removeItem('username');
sessionStorage.removeItem('sessionID');

// Clearing all data
localStorage.clear();
sessionStorage.clear();

実際の例: ユーザー設定の保存

これらの概念を実践するために、ユーザーが好みのテーマ (明るいテーマまたは暗いテーマ) を選択して保存できるシンプルな Web アプリケーションを作成しましょう。この設定は LocalStorage を使用して保存されるため、ブラウザを閉じた後も保持されます。

HTML:

  
Theme Selector
  Light Theme
  Dark Theme

  

説明：

• テーマの選択: ユーザーは、それぞれのボタンをクリックして明るいテーマまたは暗いテーマを選択できます。
• 保存設定: テーマが選択されると、キー「テーマ」の下で LocalStorage に保存されます。
• 読み込み設定: ページが読み込まれると、スクリプトは LocalStorage で保存されているテーマを確認し、それを自動的に適用します。

Web ストレージを使用する理由

Web ストレージは、ユーザー エクスペリエンスを向上させるシンプルかつ効率的な方法を提供します。設定、セッション、またはその他の必要なデータをクライアント側に保存することで、よりパーソナライズされ、応答性が高く、シームレスな Web アプリケーションを作成できます。 LocalStorage と SessionStorage を理解して活用すると、サーバー側のストレージに大きく依存せずにユーザーのニーズに応える、よりスマートなアプリケーションを構築するのに役立ちます。

結論

LocalStorage と SessionStorage は、Web 開発者にとって不可欠なツールです。データをブラウザに直接保存できるため、データをいつどのように利用できるかについて柔軟性が得られます。ユーザー設定を保持する必要がある場合でも、セッション固有の情報を維持する必要がある場合でも、Web ストレージを使用すると、最小限の労力でそれを行うことができます。これらのツールを使いこなすことで、Web アプリケーションの機能とユーザー エクスペリエンスを大幅に向上させることができます。