javascript - 正确初始化 IndexedDB 对象存储

Question

我正在尝试使用 indexedDB 来存储一些客户端数据，但在正确设置数据库时遇到问题。

我正在关注教程here

当我第一次安装扩展时，onupgradeneeded() 事件被触发，但由于某种原因，没有任何事件与对象存储事务关联正在被解雇，但我找不到任何解决此问题的文档。

这是相关代码:

const db_name="Tags";


var request = window.indexedDB.open(db_name, 1);
var tags  = [
    //codes: 0 - markdown wrap tag
    //       1 - HTML wrap tag 
    //       2 - single tag
    { domain: "www.youtube.com", 
      
      bold:["*",0],
      strikethrough:["-",0],
      italic:["_",0] 
    },
    
    
    { domain: "www.stackoverflow.com", 
      
      bold:["<strong>",1], 
      italic:["<em>",1],
      strikethrough:["<del>",1],
      superscript:["<sup>",1],
      subscript:["<sub>",1],
      heading1:["<h1>",1],
      heading2:["<h2>",1],
      heading3:["<h3>",1],
      blockquote:["<blockquote>",1],
      code:["<code>",1],
      newline:["<br>",2],
      horizontal:["<hr>",2]
    }
];


request.onerror = function(event) {
  alert("Error opening the database");
};

request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("domains", {keyPath: "domain" });
    objectStore.createIndex("domain", "domain", { unique: true });
    alert("I'm trying to do stuff"); 
    objectStore.transaction.oncomplete = function(event) {
        var domanStore=db.transaction("domains","readwrite").objectStore("domains");
        for(var i in tags)
        {
            domainStore.add(tags[i]);
            alert("added " + tags[i]["domain"] + " to the DB");
        }
        alert("I might have done stuff");
    };
    objectStore.transaction.onerror = function(event) {
        alert("Transaction error");
    };
    objectStore.transaction.onabort = function(event){
        alert("Transaction aborted");
    };



    db.onerror=function(event){
        alert("DB ERROR bubbled up");
    };
    alert("I thought I did something");
};

弹出的唯一警告框是

I'm trying to do stuff.

和

I thought I did something.

控制台没有显示错误。

我唯一能想到的是我没有正确创建对象存储，但我看不出我在这里做错了什么。

其他一些有用的来源:

• IDBObjectStore

• IDBTransaction

Answer 1

你可以使用这样的东西-

const db_name="Tags";


var request = window.indexedDB.open(db_name, 1);
var tags  = [
    //codes: 0 - markdown wrap tag
    //       1 - HTML wrap tag 
    //       2 - single tag
    { domain: "www.youtube.com", 

      bold:["*",0],
      strikethrough:["-",0],
      italic:["_",0] 
    },


    { domain: "www.stackoverflow.com", 

      bold:["<strong>",1], 
      italic:["<em>",1],
      strikethrough:["<del>",1],
      superscript:["<sup>",1],
      subscript:["<sub>",1],
      heading1:["<h1>",1],
      heading2:["<h2>",1],
      heading3:["<h3>",1],
      blockquote:["<blockquote>",1],
      code:["<code>",1],
      newline:["<br>",2],
      horizontal:["<hr>",2]
    }
];


request.onerror = function(event) {
  alert("Error opening the database");
};

request.onupgradeneeded = function(event) 
{
   var db = event.target.result;
   var objectStore = db.createObjectStore("domains", {keyPath: "domain" });
   objectStore.createIndex("domain", "domain", { unique: true });
   alert("I'm trying to do stuff"); 
   for(var i in tags)
   {
       objectStore.add(tags[i]);
       alert("added " + tags[i]["domain"] + " to the DB");
   }
   alert("I might have done stuff");

   alert("I thought I did something");
};

由于您在创建 objectStore 时填充数据，因此不必在 onupgradeneeded 函数中创建事务，因此您必须在此函数之外创建事务