Как сохранить список объектов в localStorage

Question

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

// HTML Code //

<div class="added-product">
              <div class="each-cart-row">
                 <img class="image" src="./images/AMH010327_W-1-dresslink.jpg">
                 <h4 class="title">T-shirt</h4>
                 <span class="price">$19.99</span>
                 <h3>1</h3>
                 <button class="removebtn">remove</button>
              </div>
              <div class="each-cart-row">
                 <img class="image" src="./images/AMH010327_W-1-dresslink.jpg">
                 <h4 class="title">shirt</h4>
                 <span class="price">$14.99</span>
                 <h3>1</h3>
                 <button class="removebtn">remove</button>
              </div>
             </div>

// Это моя первая попытка //

var listitem = document.querySelector('.each-cart-row').textContent;
  localStorage.setItem('layoutlist', listitem);
  console.log(localStorage);

ия получил это

// затем я попробовал этот код //

var listitem = document.querySelectorAll('.each-cart-row').textContent;
    for(var i = 0; i < listitem.length; i++){
        var title = listitem[i];
        localStorage.setItem('layoutlist', title);
            console.log(localStorage);   
     }

, и я получил это

// и наконецЯ использовал JSON //

var listitem = document.querySelectorAll('.each-cart-row');
       var jsonstr = JSON.stringify(listitem);
        localStorage.setItem('layoutlist', jsonstr);
            console.log(localStorage);  

и получил это

Answer 1

Используйте querySelectorAll и используйте map поверх него, чтобы создать массив объекта, который будет иметь img src и текст.Затем используйте JSON.stringify, чтобы преобразовать это в строку, поскольку локальное хранилище может сохранять только строки.

var listitem = document.querySelectorAll('.each-cart-row');
   //using spread operatot to use array method on collection
    let m = [...listitem].map(function(item) {
      return {
        img: item.querySelector('img').getAttribute('src'),
        text: item.querySelector('.title').textContent.trim() // remove white space
      }
    })
    localStorage.setItem('layoutlist', JSON.stringify(m));

HTML

<div class="added-product">
      <div class="each-cart-row">
        <img class="image" src="./images/AMH010327_W-1-dresslink.jpg">
        <h4 class="title">T-shirt</h4>
        <span class="price">$19.99</span>
        <h3>1</h3>
        <button class="removebtn">remove</button>
      </div>
      <div class="each-cart-row">
        <img class="image" src="./images/AMH010327_W-1-dresslink.jpg">
        <h4 class="title">shirt</h4>
        <span class="price">$14.99</span>
        <h3>1</h3>
        <button class="removebtn">remove</button>
      </div>
    </div>