如何在 localStorage 中保存对象列表答案

【问题标题】：How to save list of Objects in localStorage如何在 localStorage 中保存对象列表
【发布时间】：2018-10-28 14:44:54
【问题描述】：

我有一个想要保存在本地存储中的购物车。我保存了不在对象内的项目，但我不知道如何保存对象列表。我认为这并不难，但我找不到问题，而且我实际上是编程新手，如果我的问题很愚蠢，请原谅我。下面的代码会解释更多。

//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>

//这是我的第一次尝试//

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

and i got this

//然后我尝试了这个代码//

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);   
     }

and i got this

//最后我使用了 JSON //

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

and I got this

【问题讨论】：

您到底想在 localStorage 中存储什么？ textContent 会给出所有的文字
我想要文本和图像，我已经使用 innerHTML 尝试了上面的所有代码，它给了我所有的标签，但我不知道如何以我可以保存的方式转换它们在本地存储中
顺便说一下，它只抓取了第一个列表。我有不止一个。
您不能对 NodeList 进行字符串化。并且不要记录整个 localStorage 对象
您需要遍历所有行，将每个行映射到具有项目、数量、价格等属性的对象。这些对象将被推入一个数组中，当循环完成时您将对其进行字符串化

标签： javascript json html local-storage

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

【讨论】：