嘗試使用 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"); 讓購物車編號 = 0;

button.addEventListener("click", (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;

})