Блог

Главная - Вопросы по программированию - объединение элементов локального хранилища и вывод в абзаце

объединение элементов локального хранилища и вывод в абзаце

#javascript #jquery #output #local-storage

#javascript #jquery #вывод #локальное хранилище

Вопрос:

Я сохраняю в 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)
  );

Ответ №1:

Ну, вы могли бы получить каждый абзац, например, с помощью querySelector:

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

Но было бы также хорошим подходом сохранить каждый продукт с его собственной суммой заказа.

Комментарии:

1. спасибо за ваше предложение. Как я должен реализовать ваш код? Должен ли я удалить определенные части исходного кода выше? Товары сохраняются изначально, но этот код необходим, когда платеж не выполняется, корзина покупок автоматически очищается. И сейчас я пытаюсь обойти это.

2. не могли бы вы утешить. регистрировать ваши данные? просто чтобы увидеть лучшую картину этого. или укажите ссылку на свой код. это было бы полезно. Спасибо

Ответ №2:

После некоторых усилий я придумал другой способ получить то, что я хотел:

Объединив все, что мне было нужно, в один элемент, который был отправлен в localstorage, у меня не было проблем с его извлечением, а затем разделением, чтобы заставить его работать с остальной частью кода.

Комбинация:

 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

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