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

【问题标题】：combining local storage items and outputting in paragraph合并本地存储项并在段落中输出
【发布时间】：2019-04-23 17:05:06
【问题描述】：

我使用此代码在 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)
  );

【问题讨论】：

标签： javascript jquery output local-storage

【解决方案1】：

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

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

但是，用自己的订单数量保存每个产品也是一个好方法。

【讨论】：

感谢您的建议。我应该如何实现你的代码？我应该删除上面原始代码的某些部分吗？产品最初是保存的，但当付款失败时，此代码是必需的，然后购物车会自动清空。我现在正试图解决这个问题。
你能控制台记录你的数据吗？只是为了更好地了解它。或有您的代码的链接。那会很有帮助。谢谢

【解决方案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

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

【讨论】：