IndexedDB の使い方完全な CRUD 操作に関するガイド-jsチュートリアル-php.cn

How to use IndexedDB? Guide on complete CRUD Operations

IndexedDB の包括的なガイド: クライアント側ストレージのブラウザーのパワーハウス

Web アプリケーションがより洗練されるにつれて、効率的なクライアント側のストレージソリューションの必要性が高まっています。 IndexedDB は、大量の構造化データを保存するための低レベル API であり、堅牢でオフライン対応のアプリケーションを作成したい Web 開発者、ソフトウェアエンジニア、Web 愛好家にとって強力なツールです。

このブログでは、IndexedDB とは何なのか、どのように機能するのか、そしてそれを効果的に使用する方法を実際の例とともに探っていきます。プログレッシブ Web アプリ (PWA)、複雑なダッシュボード、ゲームのいずれを構築している場合でも、IndexedDB はデータをシームレスに管理するのに役立ちます。

IndexedDB とは何ですか?

IndexedDB は、ファイルや BLOB などの大量の構造化データを保存するために設計されたブラウザベースの NoSQL データベースです。 Cookie や localStorage とは異なり、IndexedDB ではデータを構造化形式で保存し、インデックスを使用してクエリを実行できるため、複雑なユースケースに最適です。

IndexedDB の主な機能:

非同期操作: IndexedDB との対話はノンブロッキングであり、スムーズなパフォーマンスを保証します。
構造化データストレージ: データをキーと値のペアで保存し、インデックスを使用した効率的なクエリを可能にします。
オフライン機能: データはローカルに保存されるため、インターネット接続がなくてもアクセスできます。
大容量ストレージ制限: Cookie や localStorage と比較して、より多くのストレージ容量を提供します。

IndexedDB の使用例:

プログレッシブ Web アプリ: シームレスなエクスペリエンスのためにオフラインデータを保存します。
大規模データストレージ: ユーザー設定やアプリケーションの状態などの大規模なデータセットを保存します。
キャッシュ: パフォーマンスを向上させるために API 応答をキャッシュします。

IndexedDB の使用を開始する

IndexedDB はどのように機能しますか?

IndexedDB は、以下で構成されるデータベース構造上で動作します。

データベース: データの最上位コンテナ。
オブジェクトストア: データが保存されるテーブル。それぞれは一意の名前で識別されます。
インデックス: オブジェクトストア内のクエリを最適化する構造。

IndexedDB API: 基本操作

IndexedDB の主な操作は次のとおりです。

データベースを開く: データベースを作成またはアクセスします。
オブジェクトストアの作成: データのストレージを定義します。
CRUD 操作の実行: データの追加、読み取り、更新、削除。
トランザクションの使用: データ操作をアトミックに管理します。

例 1: データベースを作成して開く

ここでは、オブジェクトストアユーザーを使用して MyDatabase という IndexedDB データベースを作成する方法を説明します。

const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.

const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Create an object store named 'users' with 'id' as the keyPath
  if (!db.objectStoreNames.contains("users")) {
    db.createObjectStore("users", { keyPath: "id" });
  }
  console.log("Database setup complete");
};

request.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database opened successfully");
};

request.onerror = function (event) {
  console.error("Error opening database:", event.target.errorCode);
};

ログイン後にコピー

説明:

indexedDB.open メソッドはデータベースを開くか作成します。
onupgradeneeded イベントは、新しいデータベースを作成するとき、またはそのバージョンをアップグレードするときにトリガーされます。
users という名前のオブジェクトストアが、主キーとして id を使用して作成されます。

例 2: オブジェクトストアへのデータの追加

トランザクションを使用してオブジェクトストアにデータを追加できます。

function addUser(id, name, email) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const user = { id, name, email };
    const addRequest = objectStore.add(user);

    addRequest.onsuccess = function () {
      console.log("User added:", user);
    };

    addRequest.onerror = function (event) {
      console.error("Error adding user:", event.target.errorCode);
    };
  };
}

// Add a new user
addUser(1, "John Doe", "john.doe@example.com");

ログイン後にコピー

説明:

トランザクションは、データを変更するために読み書きモードで作成されます。
add メソッドは、ユーザーのオブジェクトストアにデータを挿入します。

例 3: オブジェクトストアからのデータの読み取り

get メソッドを使用してデータを取得するか、すべてのエントリを反復処理します。

function getUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readonly");
    const objectStore = transaction.objectStore("users");

    const getRequest = objectStore.get(id);

    getRequest.onsuccess = function () {
      if (getRequest.result) {
        console.log("User found:", getRequest.result);
      } else {
        console.log("User not found");
      }
    };

    getRequest.onerror = function (event) {
      console.error("Error retrieving user:", event.target.errorCode);
    };
  };
}

// Get user with ID 1
getUser(1);

ログイン後にコピー

説明:

get メソッドは、キーによって特定のレコードを取得します。
データの取得は非同期であるため、成功ハンドラーとエラーハンドラーが使用されます。

例 4: IndexedDB 内のデータの更新

put メソッドを使用して既存のレコードを更新します。

function updateUser(id, updatedData) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const putRequest = objectStore.put({ ...updatedData, id });

    putRequest.onsuccess = function () {
      console.log("User updated:", { ...updatedData, id });
    };

    putRequest.onerror = function (event) {
      console.error("Error updating user:", event.target.errorCode);
    };
  };
}

// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });

ログイン後にコピー

例 5: IndexedDB のデータの削除

delete メソッドを使用してレコードを削除します。

function deleteUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const deleteRequest = objectStore.delete(id);

    deleteRequest.onsuccess = function () {
      console.log("User deleted with ID:", id);
    };

    deleteRequest.onerror = function (event) {
      console.error("Error deleting user:", event.target.errorCode);
    };
  };
}

// Delete user with ID 1
deleteUser(1);

ログイン後にコピー

IndexedDB と他のストレージソリューションの比較

Feature	IndexedDB	localStorage	sessionStorage
Storage Limit	Several MB to GB	5 MB (approx)	5 MB (approx)
Data Format	Key-value pairs	Key-value pairs	Key-value pairs
Asynchronous	Yes	No	No
Structured Data	Yes	No	No

IndexedDB を使用するためのベストプラクティス

トランザクションを適切に使用する: 原子性を確保するために、トランザクション内のデータ操作を常に管理します。
エラーを適切に処理する: デバッグとユーザーフィードバックを改善するためにエラーハンドラーを実装します。
バージョン管理: スキーマの変更を管理するために、データベースのバージョンを慎重に増加させます。
オフラインのテストシナリオ: IndexedDB はオフライン機能によく使用されます。インターネット接続がなくても期待どおりに機能することを確認してください。

結論

IndexedDB は、クライアント側のデータストレージ用の強力なツールであり、localStorage などの従来のストレージ方法をはるかに上回る機能を提供します。構造化データ、大容量ストレージ、オフライン機能をサポートする IndexedDB は、最新の Web アプリケーションを構築するために不可欠なテクノロジーです。

重要なポイント: