Question

我将以下代码存储在localStorage中：

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

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

我今天学习了如何输出以特定文本开头的记录之一。我用下面的代码来做到这一点。

  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

现在，所有内容都经过切片和切块，我可以使用所需的一切来根据原始问题创建效果。

合并本地存储项目并在段落中输出

2 个答案: