HTML5クライアントサイドデータベースが簡単に使える:IndexedDB

IndexedDBの紹介

IndexedDB は、構造化されたデータをブラウザに永続的に保存し、ウェブアプリケーションに豊富なクエリー機能を提供するオブジェクトデータベースです。

Web SQLデータベースよりもシンプルであり、公式標準におけるWeb SQLの作業は中止されています。

Web Storage と比較して、IndexedDB のストレージは上限がなく、永続的です。

データベースの作成

IndexedDBはドメインごとに別々のスペースを確保し、別々のドメインの下に複数のデータベースを作成でき、データベースごとに複数のオブジェクトストア（テーブル/オブジェクトのリポジトリ）を作成でき、1つのオブジェクトストアに複数のオブジェクトデータ（インデックス用のフィールド）を格納することができます。

AngularFire

indexedDB.openメソッドは、2つのパラメータ（データベース名、データベースバージョン）を渡してデータベースを作成するために使用され、request.onupgradeneededメソッドは、新しいデータベースの作成時、またはデータベースバージョン番号が変更されたときに呼び出されます。

オブジェクトストアの作成

paginator

store.createIndexはインデックスフィールドを作成し、内部に3つのパラメータ（インデックス名、インデックスフィールド、一意であるかどうか）を渡します。

トランザクション

IndexedDB へのクエリーとアップデートは、これらの操作が共に成功または失敗することを保証する方法として、トランザクション内に含まれます。

AngularFire

リポジトリストアに対する操作。

• put() は、保存するオブジェクトを引数としてデータを追加し、同じ主キー（keypath）が既に存在する場合はデータを変更します。
• add() は、保存するオブジェクトとともにデータを追加し、データの主キー (keypath) が同じオブジェクトにすでに存在する場合は保存に失敗します。
• delete() は、対象データのプライマリキーを渡してデータを削除します。 get() は、対象データのプライマリキーを渡してデータを取得します。

データのイテレーション

カーソルを介してスコープ付きオブジェクトリポジトリからデータを取得する

Firebase

IDBKeyRangeの主なメソッドをいくつか紹介します。

• IDBKeyRange.bound(n1, n2, false, false); n1からn2までの範囲を持つ主キーで、3番目の4つの引数はn1またはn2を含むかどうかを指定します。
• IDBKeyRange.only(n); 主キーを範囲指定する。
• IDBKeyRange.lowerBound(n, false); nより大きい主キーのセット
• IDBKeyRange.upperBound(n, false); nより小さい主キーのセット

クエリデータ

クエリ可能なデータは、store.createIndex() によってインデックスが作成されている必要があります。

Query API

データベースの削除

Paginator

概要

以上で、データベースの作成、オブジェクトストアの作成、トランザクションによるデータのトラバース、追加、クエリの実行が完了しました。コードのアドレスは デモアドレス これを読んで勉強していただき、スクリプトハウスを応援していただければと思います。