LocalStorage と SessionStorage のステップバイステップガイド: クライアント側でのデータの保存-jsチュートリアル-php.cn

LocalStorage と SessionStorage のステップバイステップガイド: クライアント側でのデータの保存

PHPz

リリース： 2024-08-12 19:02:19

オリジナル

998 人が閲覧しました

A Step-by-Step Guide to LocalStorage and SessionStorage: Storing Data on the Client Side

ウェブストレージの概要

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Selector</title>
  <style>
    body.light {
      background-color: white;
      color: black;
    }
    body.dark {
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Theme Selector</h1>
  <button id="light">Light Theme</button>
  <button id="dark">Dark Theme</button>

  <script>
    const lightButton = document.getElementById('light');
    const darkButton = document.getElementById('dark');

    // Event listeners for theme selection
    lightButton.addEventListener('click', () => {
      document.body.className = 'light';
      localStorage.setItem('theme', 'light');
    });

    darkButton.addEventListener('click', () => {
      document.body.className = 'dark';
      localStorage.setItem('theme', 'dark');
    });

    // Load saved theme on page load
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.body.className = savedTheme;
    }
  </script>
</body>
</html>

ログイン後にコピー

説明：

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

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

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

結論

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

以上がLocalStorage と SessionStorage のステップバイステップガイド: クライアント側でのデータの保存の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。