尝试使用localStorage调用保存的数据时出错

Question

我试图在元素的innerHTML上显示计数器，但是，在文档上按下刷新键后，计数器将消失。我的控制台上也没有错误。有什么建议吗？谢谢：

let CartCounter = document.getElementById("TotalItems");
let CartNumber = 0;
buttonFirst.addEventListener("click", function (event) {
event.preventDefault();
CartNumber += 1;
let CartStorage_Serialized = JSON.stringify(CartNumber);
localStorage.setItem("cartItems", CartStorage_Serialized);
let CartStorage_Deserialized = JSON.parse(localStorage.getItem("cartItems"));
CartCounter.innerHTML = CartStorage_Deserialized;
}

Answer 1

当您使用类似innerHTML的东西检查html元素的内容时，您需要确保页面已首先呈现。因此，最好像下面的代码一样将它粘贴在window.load侦听器中。

然后，在同一个监听器中，您可以检查localStorage中的值，如果它在那里，则将其放入innerHTML中。

在您的按钮点击中，您可以获取CartCounter的当前值，并将其保留为一个数字(因为当您从innerHTML获取它时，它将是一个字符串(，在它前面放一个+。然后您可以添加1并将其保存回localStorage。如果您只是像这样存储数字，则不需要序列化这些值。

let CartCounter
window.addEventListener('load', () => {
CartCounter = document.getElementById("TotalItems");
CartCounter.innerHTML = localStorage.getItem('cartItems') ? localStorage.getItem('cartItems') : 0;
})
let CartNumber = 0;
buttonFirst.addEventListener("click", (event) => {
event.preventDefault();
let CartNumber = +document.getElementById("TotalItems").innerHTML;
CartNumber ++;
localStorage.setItem("cartItems", CartNumber);
CartCounter.innerHTML = CartNumber;
}

Answer 2

它是有效的。我想你写错了HTML代码。

form>
<input class="textinput" type="text" />
<input class="button" type="submit" />
</form>
<div id="TotalItems"></div>
const CartCounter = document.getElementById("TotalItems");

const button=document.querySelector(".button"(；设CartNumber=0；

button.addEventListener("点击"，(event(=>｛

event.preventDefault();
CartNumber += 1;
let CartStorage_Serialized = JSON.stringify(CartNumber);
localStorage.setItem("cartItems", CartStorage_Serialized);
let CartStorage_Deserialized = JSON.parse(localStorage.getItem("cartItems"));
CartCounter.innerHTML = CartStorage_Deserialized;

})