结合本地存储项目和段落输出

Question

我使用以下代码存储在localStorage多个记录中：

    localStorage.setItem('LinkURL' + ranNr, rdsLinkURL);
    localStorage.setItem('LinkTitle' + ranNr, rdsLinkTitle);
    localStorage.setItem('LinkOrderURL' + ranNr, rdsLinkOrderURL);
    localStorage.setItem('OrderAmount' + ranNr, rdsOrderAmount);

每条记录都是购物车中的产品，因此当购物车中添加了3个产品时，本地存储中将有3个记录中的12个记录（每个产品都有自己的设置）。

我今天学到了如何输出以某个文本开头的记录之一。我使用下面的代码执行此操作。

  let duffy = Object.keys(localStorage).filter(v => v.startsWith("LinkTitle"));
  duffy.forEach(z => $("body").append("<p class='" + localStorage.getItem(z) + "'></p>"));

上面的代码有效，创建了3个段落。但现在我想用OrderAmount填充段落，但我不知道如何操纵上面的代码来达到这个效果。

我忘了提到我正在尝试的东西：也会在这里发布。

  let duffy = Object.keys(localStorage).filter(v => v.startsWith("LinkTitle"));
  duffy.forEach(
    z => $("body").append("<p class='" + localStorage.getItem(z) + "'></p>")
  );

  let goofy = Object.keys(localStorage).filter(v => v.startsWith("OrderAmount"));
  goofy.forEach(
    g => localStorage.getItem(g)
    $('.' z).append(g)
  );

Answer 1

好吧，您可以使用querySelector获取每个段落，例如：

const paragraphs = document.querySelectorAll('selector for your paragraphs')
paragraph.forEach((p, i ) => {
const amount = goofy[i]
    p.innerHTML = amount
})

但是，使用自己的订单金额保存每件产品也是一种很好的方法。

Answer 2

经过一番挣扎，我想出了另一种方法来获得我想要的东西：

通过将我需要的所有内容组合到一个发送到本地存储的项目中，我可以检索它，然后将其分离以使其与其余代码一起使用。

组合：

var rdsCombo = "("+rdsLinkTitle+")["+rdsOrderAmount+"]{"+rdsProductID+"}";

此组合的输出如下所示：

(title)[4 x][25]

保存到本地存储

localStorage.setItem('Combo' + ranNr, rdsCombo);

从本地存储中检索

let ducky = Object.keys(localStorage).filter(a => a.startsWith("Combo"));
  ducky.forEach(
    b => $("body").append("<p class='quantity-verification qvid-" + count_one++ + "' style='display:none;'>" + localStorage.getItem(b) + "</p>")
  );

从检索到的本地存储添加数据

$('.quantity-verification').each(function() {
  var qvCombo = $(this).text();
  // Extracting Title
  var qvTitle = qvCombo,
  qvTitlepos = qvTitle.indexOf("(") + 1;
  qvTitle = qvTitle.slice(qvTitlepos, qvTitle.lastIndexOf(")"));
  // Extracting Quantity
  var qvQuantity = qvCombo,
  qvQuantitypos = qvQuantity.indexOf("[") + 1;
  qvQuantity = qvQuantity.slice(qvQuantitypos, qvQuantity.lastIndexOf(" x]"));
  console.log('qvQuantity:'+qvQuantity);
  // Extracting Product ID
  var qvProductID = qvCombo,
  qvProductIDpos = qvProductID.indexOf("{") + 1;
  qvProductID = qvProductID.slice(qvProductIDpos, qvProductID.lastIndexOf("}"));
  console.log('qvProductID:'+qvProductID);
}); // end of each function

现在切片和切块，我可以使用我需要的任何东西来创建原始问题的效果。