即使在 localstorage javascript 中刷新页面后，仍保留 HTML 可见数据-解网

问：

我制作了一个包含一些商品的购物车页面，我制作了一个deleteItemFromCart（）函数，用于删除想要删除的商品。

我无法做的一件事是将更改存储到浏览器，因此每当用户刷新浏览器时，都会出现相同的更改，可悲的是，每当我刷新页面时，所有更改都会设置回默认情况。

我还曾经做过一个货币兑换选项，它奏效了......但是，将更改保存到 localStorage 时仍然会出现相同的问题。

我试图处理这段代码，但似乎没有任何效果：

localStorage.setItem("key", "value");

// Get all delete buttons
var deleteBtns = document.getElementsByClassName("delete_icon");
 
// Add event listeners to delete buttons 
for (var i = 0; i < deleteBtns.length; i++) {   
  deleteBtns[i].addEventListener("click",
  deleteItemFromCart); 
}
 
// Load cart items from localStorage when the page is loaded
window.addEventListener("load", loadCartFromLocalStorage);
 
function deleteItemFromCart(event) {   
  var deleteBtn = event.target;  
  var cartItem = deleteBtn.parentNode.parentNode;   
  cartItem.remove();
  saveCartToLocalStorage(); 
}
 
function saveCartToLocalStorage() {   
  var cartItems =
  document.getElementsByClassName("cartItems");   
  var cartItemsData = [];
 
  for (var i = 0; i < cartItems.length; i++) {
    var cartItem = cartItems[i];
    var image = cartItem.querySelector(".shop-item-image").src;
    var title = cartItem.querySelector(".shop-item-title").textContent;
    var price = cartItem.querySelector(".shop-item-price").textContent;
    var quantity = cartItem.querySelector("input[name='Qauntity']").value;
    var itemData = {
       image: image,
       title: title,
       price: price,
       quantity: quantity
    };
 
    cartItemsData.push(itemData);   }
 
    localStorage.setItem("cartItems", JSON.stringify(cartItemsData)); }
 
function loadCartFromLocalStorage() {   
  var cartItemsData =
  localStorage.getItem("cartItems");
 
  if (cartItemsData) {
    var cartItemsArray = JSON.parse(cartItemsData);
    for (var i = 0; i < cartItemsArray.length; i++) {
      var itemData = cartItemsArray[i];
      var cartItem = document.createElement("tr");
      cartItem.classList.add("cartItems");
      cartItem.innerHTML = `
         <td><img src="${itemData.image}" alt="" class="shop-item-image"></td>
         <td><h2 class="shop-item-title">${itemData.title}</h2></td>
         <td><p class="shop-item-price">${itemData.price}</p></td>
         <td><input type="number" name="Qauntity" value="${itemData.quantity}"></td>
         <td><span class="material-symbols-outlined delete_icon" id="delete_icon">
           delete
         </span></td>
     `;
 
      document.querySelector(".product_items").appendChild(cartItem);
    }
  }
}

<!-- 1st section cart items -->    
<div class="table_container">
  <table>
    <tr>
      <th></th>
      <th>Product</th>
      <th>Price</th>
      <th>Qauntity</th>
      <th>Remove</th>
    </tr>
    <div class="product_items">
    <!-- first item -->
    <tr>
      <td><img src="./assets/images/tutu-skirt1.jpg" alt=""></td>
      <td><h2>tutu Skirt</h2></td>
      <td><p>5 JOD</p></td>
      <td><input type="number" name="Qauntity" id="qauntity"></td>
      <td><span class="material-symbols-outlined delete_icon">delete</span></td>
    </tr>
    <!-- other item -->
    <tr>
      <td><img src="./assets/images/tutu-skirt2.jpg" alt=""></td>
      <td><h2>tutu Skirt</h2></td>
      <td><p>5 JOD</p></td>
      <td><input type="number" name="Qauntity" id="qauntity"></td>
      <td><span class="material-symbols-outlined delete_icon">delete</span></td>
    </tr>
    <!-- other item -->
    <tr>
      <td><img src="./assets/images/tutu-skirt3.jpg" alt=""></td>
      <td><h2>tutu Skirt</h2></td>
      <td><p>5 JOD</p></td>
      <td><input type="number" name="Qauntity" id="qauntity"></td>
      <td><span class="material-symbols-outlined delete_icon">delete</span></td>
    </tr>
  </div>
  </table>
</div>
 
<div class="total">
  <p>Total Price : <strong class="cart-total-price">15.00 JOD</strong></p>
  <button class="btn buy">Purchase</button>
</div>

javascript 本地存储货币购物车

即使在 localstorage javascript 中刷新页面后，仍保留 HTML 可见数据

keep html visible data even after refreshing the page in localstorage javascript

评论