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

Question

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

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

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

我使用以下代码创建了数据库。变量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");
  };
}

问题是，我不知道如何在IndexedDB中存储变量imagetxtb64。此外，我希望以后可以访问这些变量。

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属性设置为keypath。在创建对象库时，在id属性上设置自动增量标志。

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