クッキングIndexedDB

Habréで、 すでにクライアントに大規模な構造化データを保存するための標準であるIndexedDB について話しました。 しかし、それはかなり前のことであり、APIは大きく変わりました。 それにもかかわらず、検索の最初の記事の1つがポップアップし、このテクノロジーを使用しようとする多くの人を誤解させます。 そのため、現在のAPIに関する情報を含む新しい記事を書くことにしました。

IndexedDBとは

IndexedDBは、Web Storageアプリケーションインターフェイスを介して利用可能なキー/値ペアのWebベースのストレージよりもはるかに強力で効率的で信頼性の高いオブジェクトデータベースです。 Webストレージおよびファイルシステムへのアプリケーションインターフェイスと同様に、データベースの可用性は、それを作成したドキュメントの作成元によって決まります。



オリジンごとに、任意の数のIndexedDBデータベースを作成できます。 各データベースには、特定のオリジンに対して一意でなければならない名前があります。 IndexedDBアプリケーションインターフェイスの観点から見ると、データベースは名前付きオブジェクトストアの単純なコレクションです。 各オブジェクトには、保存およびストレージからの取得に使用するキーが必要です。 キーは一意である必要があり、ソートするには自然な順序である必要があります。 IndexedDBは、データベースに追加されたオブジェクトごとに一意のキーを自動的に生成できます。 ただし、多くの場合、オブジェクトストアに格納されているオブジェクトには、キーとして使用するのに適したプロパティが既にあります。 この場合、オブジェクトストアを作成するときに、単にキープロパティを定義するだけで十分です。



主キーの値によってストレージからオブジェクトを取得する機能に加えて、オブジェクトの他のプロパティの値によって検索する機能もあります。 この機能を提供するために、オブジェクトストアで任意の数のインデックスを定義できます。 各インデックスは、保存されたオブジェクトの二次キーを定義します。 これらのインデックスは全体として一意ではなく、多くのオブジェクトが同じキーに対応できます。 したがって、インデックスを使用してオブジェクトストアにアクセスする操作では、通常、結果ストリームからオブジェクトを1つずつ抽出するためのアプリケーションインターフェイスを定義するカーソルが使用されます。



IndexedDBは操作の原子性を保証します：データベース内の読み取りおよび書き込み操作はトランザクションに結合されます。これにより、それらはすべて正常に完了するか、いずれも実行されず、データベースは未定義の部分的に変更された状態のままになりません。

さあ始めましょう

IE> 9、Firefox> 15、Chrome> 23は、プレフィックスなしでの動作をサポートしますが、すべてのオプションを確認することをお勧めします。

var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データベース接続

データベースの操作は、開く要求から始まります。

 var request = indexedDB.open("myBase", 1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

openメソッドはIDBOpenDBRequestオブジェクトを返します。ここでは、3つのイベントハンドラーに関心があります。

• onerror ;
• 成功する
• onupgradeneeded 。

エラーが発生するとOnerrorが発生し、パラメータでエラーオブジェクトを受け取ります。



すべてが順調に進んだ場合にOnsuccessが呼び出されますが、メソッドは開いているデータベースのインスタンスをパラメーターとして受け取りません。 開いているデータベースには、リクエストオブジェクトrequest.resultからアクセスできます。



これまでのところ、すべては以前と同じでしたが、今では違いが始まります。 openメソッドの2番目の引数は、データベースのバージョンです。 バージョンは自然数のみです。 分数を渡すと、最も近い整数に丸められます。 指定されたバージョンのデータベースが存在しない場合、 onupgradeneededが呼び出され、古いバージョンが存在する場合はデータベースを変更し、存在しない場合はデータベースを作成できます。



したがって、データベースに接続する汎用機能は、たとえば次のようになります。

 function connectDB(f){ var request = indexedDB.open("myBase", 1); request.onerror = function(err){ console.log(err); }; request.onsuccess = function(){ //          f(request.result); } request.onupgradeneeded = function(e){ //     ,    . e.currentTarget.result.createObjectStore("myObjectStore", { keyPath: "key" }); connectDB(f); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、fは、開いているデータベースが渡される関数です。

データベース構造

IndexedDBはテーブルでは動作しませんが、オブジェクトストア： ObjectStoreで動作します。 ObjectStoreを作成するとき、キーフィールドの名前（設定オブジェクトの文字列プロパティ：keyPath）とキーの自動生成（設定オブジェクトのブールプロパティ：autoIncrement）の名前とパラメーターを指定できます。



キーフィールドに関して、4つの行動戦略があります：

• キーフィールドが指定されておらず、キー生成が有効になっていません。新しいレコードが追加されるたびにキーを手動で指定する必要があります。
• キーフィールドが示され、自動生成はオフです-キーフィールドがキーです。
• キーフィールドは指定されず、自動生成がオンになります-IndexedDB自体がキー値を生成しますが、新しいレコードを追加するときにキー値を指定できます。
• キーフィールドが示され、自動生成が有効になっています-新しい要素にキープロパティがない場合、IndexedDBは新しい値を生成します。

異なるタイプのレコードには、異なるオプションが適しています。 たとえば、プリミティブを保存する場合は、それらのキーフィールドを生成することをお勧めします。 通常、オブジェクトを保存し、キーフィールドを使用します。



createObjectStoreメソッドを使用してObjectStoreを作成できます。 ObjectStoreを作成するとき、その名前とパラメーター（キーフィールドなど）を指定できます。 createIndexメソッドを使用して、データベースインデックスを作成できます。 インデックスを作成するとき、その名前、作成する必要があるフィールド、およびキーの一意性などのパラメータを指定できます。

 objectStore.createIndex("name", "name", { unique: false });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メモを操作する

はじめに述べたように、IndexedDBのレコードを使用した操作は、トランザクションの一部として発生します。 トランザクションは、 トランザクションメソッドによって開かれます。 このメソッドでは、必要なObjectStoreとアクセスモード（読み取り、読み取りと書き込み、バージョン変更）を指定する必要があります。 バージョン変更モードは、基本的にonupgradeneededメソッドと同じです。



特定の数値を測定しませんでしたが、パフォーマンスの観点から、トランザクションパラメータを慎重に設定する方が良いと思います。必要なObjectStoreのみを開き、読み取りが必要なときにレコードを要求しないでください。

 db.transaction(["myObjectStore"], "readonly");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

開いたトランザクションができたので、レコードを操作するための次のメソッドを持つObjectStoreを取得できます。

• add-厳密に新しいレコードを追加します。既存のキーでレコードを追加しようとすると、エラーが発生します。
• put-指定されたキーの新しいレコードを上書きまたは作成します。
• get-キーでレコードを返します。
• delete-指定されたキーのレコードを削除します。

カーソル

getメソッドは、データを受信するキーがわかっている場合に便利です。 ObjectStoreのすべてのエントリを調べたい場合は、カーソルを使用できます。

 var customers = []; objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { customers.push(cursor.value); cursor.continue(); } else { alert("Got all customers: " + customers); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、私のようなMozillaの人たちは、すべてのレコードを不快にするこの方法を見つけ、ObjectStoreのすべてのコンテンツを即座に返すメソッドmozGetAllを作成しました 。 将来、他のブラウザが実装することを願っています。

索引

インデックスを使用して値を取得する場合、すべてが非常に簡単です：

 var index = objectStore.index("name"); index.get("Donna").onsuccess = function(event) { alert("Donna's SSN is " + event.target.result.ssn); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

制限事項

大きさ

サイズにほとんど制限はありません。 Firefoxはハードドライブのサイズのみを制限しますが、50メガバイトごとにユーザーの確認が必要であるという条件で。 Chromeは、各データベースをその半分の20％に制限しながら、それらを作成したすべてのWebページのデータベースの下のハードドライブの半分を占有できます。

ブラウザのサポート

私の意見では、サファリとモバイルオペラを除くすべての新しいブラウザでサポートされていますが、これらは重要ではありません。

例

通常、すべての記事でアドレス帳が例として考えられていますが、本質的に違いはなく、コード全体は普遍的ですが、変更のためにファイルストレージを表示することにしました。

 var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction, baseName = "filesBase", storeName = "filesStore"; function logerr(err){ console.log(err); } function connectDB(f){ var request = indexedDB.open(baseName, 1); request.onerror = logerr; request.onsuccess = function(){ f(request.result); } request.onupgradeneeded = function(e){ e.currentTarget.result.createObjectStore(storeName, { keyPath: "path" }); connectDB(f); } } function getFile(file, f){ connectDB(function(db){ var request = db.transaction([storeName], "readonly").objectStore(storeName).get(file); request.onerror = logerr; request.onsuccess = function(){ f(request.result ? request.result : -1); } }); } function getStorage(f){ connectDB(function(db){ var rows = [], store = db.transaction([storeName], "readonly").objectStore(storeName); if(store.mozGetAll) store.mozGetAll().onsuccess = function(e){ f(e.target.result); }; else store.openCursor().onsuccess = function(e) { var cursor = e.target.result; if(cursor){ rows.push(cursor.value); cursor.continue(); } else { f(rows); } }; }); } function setFile(file){ connectDB(function(db){ var request = db.transaction([storeName], "readwrite").objectStore(storeName).put(file); request.onerror = logerr; request.onsuccess = function(){ return request.result; } }); } function delFile(file){ connectDB(function(db){ var request = db.transaction([storeName], "readwrite").objectStore(storeName).delete(file); request.onerror = logerr; request.onsuccess = function(){ console.log("File delete from DB:", file); } }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

IndexedDBはすでにブラウザで完全にサポートされており、すぐに使用できます。 これは、スタンドアロンのWebアプリケーションを作成するための優れたツールですが、依然として賢明に使用する必要があります。 WebStorageを回避する方法-WebStorageを回避する方法を改善します。 クライアントに何も保存できない場合は、クライアントに何も保存しない方が良いでしょう。



現在、WebStorage、FileSystem API、IndexedDB、およびWebSQLとの連携を内部にカプセル化するライブラリは増えていますが、私の意見では、理解せずに他の人のコードの束をドラッグしないように、少なくとも1回はコードを記述する方が良いでしょう仕事。



MDNの詳細。