Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/selenium/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/iphone/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript indexedDB正确用法_Javascript_Indexeddb - Fatal编程技术网

Javascript indexedDB正确用法

Javascript indexedDB正确用法,javascript,indexeddb,Javascript,Indexeddb,我正在试验indexedDB。现在一切都是异步的,这让我的大脑很受伤 我创建了这样一个对象: var application = {}; application.indexedDB = {}; application.indexedDB.db = null; application.indexedDB.open = function() { var dbName = "application"; var dbVersion = 1; var openRequest = i

我正在试验indexedDB。现在一切都是异步的,这让我的大脑很受伤

我创建了这样一个对象:

var application = {};
application.indexedDB = {};
application.indexedDB.db = null;

application.indexedDB.open = function() {

   var dbName = "application";
   var dbVersion = 1;

   var openRequest = indexedDB.open(dbName, dbVersion);

   openRequest.onupgradeneeded = function(e) {

      console.log("Upgrading your DB (" + dbName + ", v" + dbVersion + ")...");

      var thisDB = e.target.result;

      if (!thisDB.objectStoreNames.contains("journal")) {
         thisDB.createObjectStore(
            "journal", 
            {keyPath: "id"}
         );
      }
   }

   openRequest.onsuccess = function(e) {
      console.log("Opened DB (" + dbName + ", v" + dbVersion + ")");
      application.indexedDB.db = e.target.result;
   }

   openRequest.onerror = function(e) {
      console.log("Error");
      console.dir(e);
   }
};
现在,我可以使用
application.indexedDB.open()
打开数据库连接。现在,我向对象添加了另一个函数:

application.indexedDB.addItemToTable = function(item, table) {

    var transaction = application.indexedDB.db.transaction([table], "readwrite");
    var store = transaction.objectStore(table);

    //Perform the add
    var request = store.add(item);

    request.onerror = function(e) {
        console.log("Error", e.target.error.name);
        //some type of error handler
    }

    request.onsuccess = function(e) {
        console.log("Woot! Did it");
    }
};
我的指令序列扩展如下:

var application = {};
application.indexedDB = {};
application.indexedDB.db = null;

application.indexedDB.open = function() {

   var dbName = "application";
   var dbVersion = 1;

   var openRequest = indexedDB.open(dbName, dbVersion);

   openRequest.onupgradeneeded = function(e) {

      console.log("Upgrading your DB (" + dbName + ", v" + dbVersion + ")...");

      var thisDB = e.target.result;

      if (!thisDB.objectStoreNames.contains("journal")) {
         thisDB.createObjectStore(
            "journal", 
            {keyPath: "id"}
         );
      }
   }

   openRequest.onsuccess = function(e) {
      console.log("Opened DB (" + dbName + ", v" + dbVersion + ")");
      application.indexedDB.db = e.target.result;
   }

   openRequest.onerror = function(e) {
      console.log("Error");
      console.dir(e);
   }
};
  • application.indexedDB.open()
  • application.indexedDB.addItemToTable(项目,“日记账”)
  • 但这不起作用。因为open指令是异步的,
    application.indexedDB.db
    在addItemToTable函数中调用时还不可用。 Javascript开发人员如何解决这个问题

    我在这里学习了这个教程:现在我对这些例子有一些问题

    例如,他直接在“onsuccess”部分(在“ReadMoreData”部分)中创建HTML输出。在我看来,这是糟糕的编码,因为视图与db读取部分无关。。不是吗?但我的问题来了。你怎么能在“onsuccess”部分返回一些东西呢? 添加callbackfunctions有些复杂。特别是当我想读取一些数据,并通过该结果集获取更多数据时。描述我的意思很复杂。 我做了一个小小提琴-也许它澄清了一些事情


    谢谢

    我通常采用的模式是等待所有数据库操作连接。它的概念类似于jQuery中的
    $.ready

    你会发现,随着应用程序的老化,你有很多模式版本,还需要升级数据。数据库连接本身有很多逻辑

    若在准备就绪之前需要使用数据库,则可以使用回调队列。以下是Google analytics网站上的片段:

    基本上,一旦连接数据库,您将执行这些回调


    我强烈建议你去看看我自己的图书馆。它有所有这些概念。

    您不需要使用其他人的额外程序。在使用indexedDB之前,您需要了解异步javascript(AJAX)。这是无法避免的。您可以学习AJAX而不必学习indexedDB。例如,看看XMLHttpRequest是如何工作的。了解setTimeout和setInterval。也许可以了解requestAnimationFrame。如果您知道nodejs的内容,请查看process.nextTick。了解函数是如何成为第一类的。了解使用回调函数的想法。了解传球风格

    对于这个问题,你可能得不到你想要的答案。若有什么不同的话,这是关于javascript中异步编程的堆栈溢出的数千个其他问题的重复。它甚至与indexedDB没有关系。看看关于异步js的许多其他问题

    也许这会让你开始:

    var-a;
    setTimeout(函数(){a=1;},10);
    console.log('a的值是%s',a);
    

    弄清楚为什么这不起作用。如果您这样做了,您将更接近于找到这个问题的答案。

    仅为您提供一个名为IDBWrapper的库,它包装了复杂性,并提供了一种方便的方法来处理IndexedDb。了解更多信息:我建议在indexDB之上使用一个工具,这样您就不必处理太多的低级编码。PockDB是一个好的,甚至是jQeury的。您还可以考虑创建promise包装器,允许您以更传统的自上而下的方式编写代码。ConstraintError意味着您试图使用现有密钥添加数据。尝试重命名你的数据库,它不会给你任何错误谢谢你的评论!您建议的框架(PockDB和IDBWrapper)看起来非常有前途。我很快就会查出来的!正如@Josh在他的帖子中所说的,我将在异步js中练习。。那里似乎缺乏知识……)