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

Question

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

它的存储作为一个对象，但当我尝试JSON.Stringify()它返回一个空数组像这样"[]">

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