从MySQL到IndexedDB [英] from MySQL to IndexedDB

问题描述

美好的一天，
我不确定我的问题是否是可能的，这就是我问的原因:)
我正在开发一个使用PHP / MySQL的应用程序，当它在线时，但在离线时使用indexedDB（好吧，这是目标！）。
对于用户来说，只能读取数据库（无需写入）。
在线时，我想填充indexedDB数据库，以便在应用程序离线时能够使用它与MySQL数据库的内容。

Good day, I'm not sure if my question is even something possible or not, that's why I ask :) I'm developping an app which uses PHP/MySQL when it's online, but uses indexedDB when offline (well, this is the target!). For the user, it's only to read the database (nothing to write on). When online, I'd like to populate the indexedDB database in order to be able to use it as soon as the app is offline with the content of the MySQL database.

我想做的是这样的：

function checkNetwork() {
    if (!navigator.onLine) {
        console.log("Navigator is offline. Loading INDEXEDDB as is.");
        openIndexedDBDatabase();
    } else {
        console.log("Navigator is online. Loading database via PHP.");
        openPHPdatabase();
    }
}

我还没想过如何填充IndexedDB数据库...这是我用来尝试填充 openPHPdatabase（）函数的代码的摘录：

I haven't figured how to populate the IndexedDB database... Here is an extract of the code I use to "try" to populate in the openPHPdatabase() function:

request.onsuccess = function (e) {

                    db = e.target.result;
                    var transaction = db.transaction("myDB", "readwrite");
                    var objectStore = transaction.objectStore("myDB");

                    console.log("Retrieve from PHP Database to indexedDB.");
                    $.getJSON('./php/database.php', function(data) {
                        $.each(data, function (key, value) {
                            //Populate here...
                        });
                    });
};

如果您有任何想法，我会感兴趣！ :)
提前致谢！

If you have any idea, I would be interested! :) Thanks in advance!

推荐答案

嗯，对于初学者，你将两个异步系统混合在一起（ajax和indexedDB），这并不总是有效。为了保证它始终有效，您需要重写代码，以便首先获取json数据，等待它完成，然后连接到数据库，启动事务，并执行put请求。

Well, for starters, you are mixing two async systems together (ajax and indexedDB), which will not always work. In order to guarantee that it will always work, you will need to rewrite the code so that you first fetch the json data, wait for it to complete, and then connect to the database, start a transaction, and execute put requests.

如果您熟悉promises，并且您也熟悉新的异步功能和const / let，可能是这样的：

If you are familiar with promises, and you are also familiar with the new async functionality, and const/let, maybe something like this:

// Asynchronously open a connection to indexedDB
function openIndexedDBDatabase() {
 return new Promise(function(resolve, reject) {
   const request = indexedDB.open('dbname', dbversionnumber);
   request.onsuccess = () => resolve(request.result);
   request.onerror() = () => reject(request.error);
 });
}

// Asynchronously fetch some json data
function getJsonAsync(url) {
  return new Promise(function(resolve, reject) {
    $.getJSON(url, resolve);
  });
}

// Asynchronously store the data in indexedDB
function storeTheDataInIndexedDb(db, data) {
  return new Promise(function(resolve, reject) {
     const transaction = db.transaction('storename', 'readwrite');
     transaction.oncomplete = () => resolve();
     transaction.onerror = () => reject(transaction.error);
     const store = transaction.objectStore('storename');
     for(let obj of data) {
       store.put(obj);
     }
  });
}

// Asynchronously do all the things together
async function doStuff() {
   if(!navigator.onLine) {
      const data = await getJsonAsync('./php/database.php');
      const db = await openIndexedDBDatabase();
      await storeTheDataInIndexedDb(db, data);
      db.close();
   } else {
      openPHPdatabase();
   }
}

doStuff();

这篇关于从MySQL到IndexedDB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！