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");
  };
}

问题是，我不知道如何在 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 属性设置为键路径。创建对象存储时在 id 属性上设置自动递增标志。

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

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

UI5 Indexed DB: store variables and call them later

javascript

indexeddb

sapui5