正确初始化 IndexedDB 对象存储

Question

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

我正在学习教程here

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

这是相关代码：

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.whosebug.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.

控制台没有显示任何错误。

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

其他一些有用的资源：

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.whosebug.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 函数中创建事务，在该函数之外您必须创建事务

正确初始化 IndexedDB 对象存储

Properly initializing an IndexedDB object store

javascript

database

google-chrome-extension

dom-events

indexeddb