如何在 html 中显示 localStorage 对象答案

【问题标题】：how to show localStorage objects in html如何在 html 中显示 localStorage 对象
【发布时间】：2020-09-11 06:59:59
【问题描述】：

我想显示我存储在localStorage中的数据。

我想显示我存储在“我的购物车”HTML 页面的localStorage 中的对象数组，当单击“添加到购物车”按钮时，它将显示该数据。

function addToCartClicked(event)
{
    var button = event.target
    var shopItem = button.parentElement.parentElement
    //var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    //var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    //var imgSrc = shopItem.getElementsByClassName('shop-item-image')[0].src

    var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];

    var newItem = 
    {
    'product-name': shopItem.getElementsByClassName('shop-item-title')[0].innerText,
    'product-image': shopItem.getElementsByClassName('shop-item-image')[0].src,
    'product-price': shopItem.getElementsByClassName('shop-item-price')[0].innerText
    };

 oldItems.push(newItem);

 localStorage.setItem('itemsArray', JSON.stringify(oldItems));

}


function displayCart()
{

}

【问题讨论】：

您的问题中包含您需要的一切。只需调用 displayCart();来自“addToCartClicked（事件）”。

标签： javascript html json local-storage

【解决方案1】：

function displayCart()
{
  const items = localStorage.getItem('itemsArray');

  if (items) {
   const parsedItems = JSON.parse(items);
   // Do Stuff With parsedItems 
  }
}

【讨论】：

不要直接发布解决方案。给出一些解释！

【解决方案2】：

您需要使用您用来保存的密钥从本地存储中获取数据，在本例中为“itemsArray”

您已经使用 getItem 方法获取值

如下再次使用：

let returnedValues = JSON.parse(localStorage.getItem('itemsArray'));

【讨论】：