UI5索引数据库：存储变量并稍后调用

Question

我目前正在开发一个应用程序项目，在使用该应用程序时，应将数据（以变量的形式）离线存储。

我已经在我的应用程序中成功创建了一个IndexedDB数据库，如以下浏览器屏幕截图所示：

我创建了一个签名板，用户可以在其中签名。我不想立即将签名图像上传到服务器。相反，我想将签名的base64字符串存储在IndexedDB中。存储它之后，我想清除签名板并将下一个签名图像作为base64字符串存储在IndexedDB中，但要避免从第一个签名中丢失该字符串。

我用以下代码创建了数据库。变量imagetxtb64是签名的base64字符串。

storestring: function () {
  var signpad = this.getView().byId("digitalSignatureId");
  var imagetxtb64 = signpad.getSignatureAsJpeg(); 

  var image = new Image();
  var element = document.createElement('a');

  image.src = imagetxtb64;

  var request = window.indexedDB.open("Offline Database Example", 1);
  request.onupgradeneeded = function(event){
    var db = event.target.result;
    var objectStore = db.createObjectStore("mydata");
  };
}

问题是，我不知道如何将变量imagetxtb64存储在IndexedDB中。而且，我希望以后再访问此变量。

Answer 1

要将新对象存储在对象存储中，您将要使用put或add方法。这是一个简短的示例：

function putThing(db, thing, callback) {
  // Start a writable transaction on the object store containing things
  var transaction = db.transaction('things', 'readwrite');
  // Get the handle to the object store in the transaction
  var store = transaction.objectStore('things');

  // Listen for when the transaction commits (completes) so we can call the 
  // callback function to let the caller know the operate is done, both when 
  // it was done successfully, and when an error occurred.
  transaction.oncomplete = function(event) {
    var error = undefined;
    callback(error, thing);
  };

  transaction.onerror = function(event) {
    var error = event.target.error;
    callback(error, thing);
  };

  // Insert or update the thing in the store
  store.put(thing);

  // extra note: you could also listen to when the request completes with an 
  // error or successfully, but keep in mind that when making actual changes 
  // like add/delete/update, your changes really only take place when the 
  // transaction completes, not the requests. that is why this example only 
  // cares about when the transaction completes and not the request. be careful,
  // a lot of 'toy' examples on the internet make this mistake of prematurely 
  // concluding the operation was successful by only looking at whether the
  // request completed and not the transaction. that shortcut is only correct 
  // when you are reading data (in a readonly transaction).
}

putThing(db, myThing, function myCallback(error, thing) {
  if(error) {
    console.log('problem storing thing', error, thing);
  } else {
    console.log('stored thing!', thing);
  }
});

这是一个微不足道的操作，在indexedDB的一些简介中都有详细记录。我强烈建议您阅读一些introductory documentation。这也是造成您的问题有问题的部分原因，因为这是您可以在互联网上阅读任何有关indexedDB的入门知识的第一步。

问题的第二部分是您想每次存储一个新东西。因此，在这种情况下，您可能希望不断将新事物添加到同一商店。

通过将数据存储在数据库中，以后您将可以访问它。之后，您可以随时连接到数据库并从中加载数据。互联网上几乎所有indexedDB的介绍都很少涉及到这一点。

编辑：这是根据您的评论进行的跟进。

所以您正在存储一个字符串变量，以64为基数编码。如果将其用作键路径，则可以清楚地标识商店中的每个对象。因此，您想确保第二次执行函数时存储了新条目，您可能希望存储其他内容。而是使用id属性。将id属性设置为keypath。在创建对象存储库时，在id属性上设置自动递增标记。

然后，在存储对象之前，请勿在其对象中设置id属性。然后存储它。存储将为其分配新的ID。每次使用没有键路径的对象调用put时，都会插入该对象。每次调用带有 对象的键路径的put时，它将被替换。