HTML5 IndexedDBのデータ追加例

IndexedDBでデータを追加するサンプルコード

IndexedDBは、ブラウザ上で動作するクライアントサイドのデータベースです。大量のデータをオフラインでも保存・検索できるのが特徴で、Webアプリケーションの高度なデータ管理に活用されています。以下の関数は、IndexedDBのオブジェクトストアにデータを追加する例です。

function add() {
    var request = db.transaction(["employee"], "readwrite")
    .objectStore("employee")
    .add({ id: "001", name: "Amit", age: 28, email: "demo1@example.com" });
    request.onsuccess = function(event) {
        alert("Amitをデータベースに追加しました。");
    };
    request.onerror = function(event) {
        alert("データを追加できません\r\nAmitはすでにデータベースに存在しています!");
    }
}

上記のコードでは、次のような社員データをデータベースに追加しています。

const employeeData = [
    { id: "001", name: "Amit", age: 28, email: "demo1@example.com" },
];

コードのポイント

• db.transaction(["employee"], "readwrite")：「employee」オブジェクトストアに対して読み書き可能なトランザクションを開始します。IndexedDBでは、すべての操作をトランザクション内で実行する必要があります。
• objectStore("employee")：操作対象となるオブジェクトストアを取得します。
• add()：指定したオブジェクトをストアに追加します。同じキー（この例ではid）を持つデータが既に存在する場合は、エラーが発生します。
• onsuccess：データの追加が成功したときに呼び出されるイベントハンドラです。ここではアラートで成功を通知しています。
• onerror：追加に失敗したとき（重複データの存在など）に呼び出されるイベントハンドラです。

このように、IndexedDBではトランザクションを介してオブジェクトストアにアクセスし、非同期のイベントハンドラで結果を処理するのが基本的な流れになります。