объединение локальных предметов хранения и вывод в пункте

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

Теперь, когда все нарезано и нарезано кубиками, я могу использовать все, что мне нужно, чтобы создать эффект из исходного вопроса.