javascript - UI5 索引数据库 : store variables and call them later

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 的介绍中都详细介绍了这一点。

编辑:这是根据您的评论进行的后续行动。

所以你正在存储一个字符串变量，即base 64编码。如果将其用作关键路径，则可以清楚地标识商店中的每个对象。因此，您想确保在第二次执行函数时存储新条目，您可能想存储不同的内容。相反，使用 id 属性。将 id 属性设置为键路径。创建对象存储时在 id 属性上设置自动递增标志。

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