没有得到 JSON.strigify() 的输出

Question

我在这里尝试存储 id 的名称和它被点击的次数。

它存储为一个对象，但是当我尝试 JSON.Stringify() 它 returns 一个像这样的空数组 '[]'

if (localStorage.getItem('cart') == null) {
  var cartArr = {};
} else {
  cartArr = JSON.parse(localStorage.getItem('cart'));
}



const cartClass = document.querySelectorAll(".cart");
cartClass.forEach((ele) => {
  ele.addEventListener('click', (e) => {
    let cartId = (e.target.getAttribute('id'));
    if (cartArr[cartId] == undefined) {
      cartArr[cartId] = 1;
    } else {
      cartArr[cartId] += 1;
    }
    localStorage.setItem('cart', JSON.stringify(cartArr));
    console.log(localStorage.getItem('cart'));
  });
});

Answer 1

您的代码应该可以工作。您从未在该代码中存储数组。也许您有另一个代码将购物车存储为数组？

我会委派并给系统一点时间做出反应

const cartStr = localStorage.getItem('cart')
cartArr = cartStr ? JSON.parse(cartStr) : {}
const cartContainer = document.getElementById("cartContainer");
cartContainer.addEventListener('click', (e) => {
  const tgt = e.target.closest(".cart");
  if (tgt) {
    let cartId = tgt.id;
    cartArr[cartId] = cartArr[cartId] ? cartArr[cartId] : 0;
    cartArr[cartId]++;
    localStorage.setItem('cart', JSON.stringify(cartArr));
    setTimeout(function() {
      console.log(localStorage.getItem('cart'))
    }, 10); // give the system time to react
  }
});

Answer 2

我已经检查了你的代码，它工作正常。您的问题可以通过清洁 localStorage 来解决。似乎在某个时候您已将一个空数组存储到本地存储中。发生的情况是，JSON.stringify 存储数组的内容，但忽略您在数组对象上设置的任何自定义属性：

// This will log "[]"
const arr = [];
arr.prop = "val"
console.log(JSON.stringify(arr));

// This will log {"prop": "val"}
const obj = {};
obj.prop = "val"
console.log(JSON.stringify(obj));

没有得到 JSON.strigify() 的输出

Not getting the output for JSON.strigify()

javascript

json

web-deployment

stringify