javascript - 无法使用 jquery 填充选择框

Question

我有一个由 jQuery 填充的选择框。这些选项通过 REST 调用从服务器获取，然后用于填充选择框。

该应用程序还应该可以离线工作，但在离线时这些 REST 调用会失败。所以我正在做的是当 REST 调用实际通过时，我将这些值存储在 localStorage 中，当离线并且 REST 调用失败时，我只是在 localStorage 中获取存储的值并尝试填充选择框。

但是选择框仍然显示为空。我已经在控制台中打印了存储的值，它显示这些值实际上已成功存储和检索。我不确定为什么我的选择框仍然显示为空。

$.getJSON("/openmrs/ws/rest/v1/location", function(result) {
  var locations = $("#identifierLocations");

  localStorage.setItem("locations", result.results);

  $.each(result.results, function() {
    locations.append($("<option />").val(this.uuid).text(this.display));
  });
}).fail(function(jqXHR, textStatus, errorThrown) {
  var data = localStorage.getItem("locations");

  if (data) {
    var locations = $("#identifierLocations");

    for (var i = 0; i < data.length; i++) {
      locations.append($("<option />").val(data[i].uuid).text(data[i].display));
    }
  }
});

我在 .fail() 中使用了 console.log 并且我可以确认数据实际上包含所有存储的位置对象，但为什么我的选择框仍然显示为空。

Answer 1

问题是因为 localStorage 只能保存字符串。您需要在存储之前序列化 result.results，然后在检索它们时反序列化。试试这个:

$.getJSON("/openmrs/ws/rest/v1/location", function(result) {
  localStorage.setItem("locations", JSON.stringify(result.results));
  populateLocations(result.results);
}).fail(function(jqXHR, textStatus, errorThrown) {
  var data = localStorage.getItem("locations");
  if (data) {
    populateLocations(JSON.parse(data));
  }
});

function populateLocations(locations) {
  var html = locations.map(function(o) {
    return '<option value="' + o.uuid + '">' + o.display + '</option>';
  }).join('');
  $("#identifierLocations").html(html);
}