如何在onupgradeneeded需要在indexedDB中創建數據到兩個商店

Question

我可以問我如何在創建商店時及時在indexedDb中的兩個商店（表）中創建數據？

在此代碼：jsfiddle

$(document).ready(function() { 

function open() { 
    indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; 

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

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

     e.target.transaction.onerror = indexedDB.onerror; 

     if(db.objectStoreNames.contains("tab1")) { 
      db.deleteObjectStore("tab1"); 
     } 

     var storeColl = db.createObjectStore("tab1", { 
      keyPath: "id", autoIncrement : true 
     }); 
     storeColl.createIndex("name", "name", { unique: true }); 
     storeColl.createIndex("description", "description", { unique: false }); 

     storeColl.transaction.oncomplete = function(event) { 
      var collObjectStore = db.transaction("tab1", "readwrite").objectStore("tab1"); 
      collObjectStore.add({name: "a", description: "b"}); 
      collObjectStore.add({name: "c", description: "d"});     
     }; 


     if(db.objectStoreNames.contains("tab2")) { 
      db.deleteObjectStore("tab2"); 
     } 

     var storeColl2 = db.createObjectStore("tab2", { 
      keyPath: "id", autoIncrement : true 
     }); 
     storeColl2.createIndex("name2", "name2", { unique: true }); 
     storeColl2.createIndex("description2", "description2", { unique: false }); 

     storeColl2.transaction.oncomplete = function(event) { 
      var collObjectStore2 = db.transaction("tab2", "readwrite").objectStore("tab2"); 
      collObjectStore2.add({name: "a2", description: "b2"}); 
      collObjectStore2.add({name: "c2", description: "d2"});     
     }; 



    }; 

    request.onsuccess = function(e) { 
     db = e.target.result; 

    }; 

    request.onerror = function(){ 

    }; 


    }; 

open(); 

}); 

如果我只創建一個存儲，數據被添加。但是，如果我創建兩個商店，數據僅在第二個商店中創建。

Answer 1

儘管storeColl引用了兩個不同的對象庫，但兩個對storeColl.transaction的調用都返回相同的事務對象 - 作爲升級過程的一部分自動創建的「versionchange」事務。所以，當你的代碼完成：

storeColl.transaction.oncomplete = ...; 

... 

storeColl.transaction.oncomplete = ...; 

第二分配oncomplete覆蓋第一，也是唯一的最後一個處理分配給oncomplete運行。

一個簡單的解決方法是使用storeColl.transaction.addEventListener('complete', ...);來代替，因爲您可以以這種方式添加多個事件偵聽器。

Answer 2

您不需要等待createObjectStore來完成。您可以使用event.target.transaction立即存儲數據。這不是推薦的做法。然而，這裏是一個例子：

function onUpgradeNeeded(event) { 
    // ... 

    // Create the object stores 
    var db = event.target.result; 
    var tab1Create = db.createObjectStore("tab1", { 
    keyPath: "id", autoIncrement : true 
    }); 

    var tab2Create = db.createObjectStore("tab2", { 
    keyPath: "id", autoIncrement : true 
    }); 

    // ... 

    // Time to add some data: 
    // Get a reference to the current transaction. The transaction 
    // type is 'versionchange', which allows for 'readwrite' operations 
    var transaction = event.target.transaction; 

    // Access the object stores using the transaction and add objects 
    var tab1 = transaction.objectStore('tab1'); 
    tab1.add({name: "a", description: "b"}); 
    tab1.add({name: "c", description: "d"}); 
    var tab2 = transaction.objectStore('tab2'); 
    tab2.add({name: "a2", description: "b2"}); 
    tab2.add({name: "c2", description: "d2"}); 
}