javascript - 我如何在本地存储中存入一笔款项？

Question

多亏了一个函数，我想把总和放在我的 localStorage 中，因为我必须创建函数。当我将篮子的总数放入本地存储时，导航会更改数字。所以，刷新页面时，总数被计为一篇文章，我在 html 标签“nan”上有一个错误。你能解释一下我的代码有什么问题吗？

    let totalityPrice = document.querySelector('.subtotal');
    let products = [];
    let Total = 0;

    function displayProduct() {
      if (localStorage.length > 0) {
        for (let key in localStorage) {
          let product = JSON.parse(localStorage.getItem(key));
          document.querySelector('.cart span').textContent = localStorage.length;
          if (product) {
            products.push(key);
            cartTablebody.innerHTML += `

    <tr>
    <td>${product.title}</td>
    <td>${product.price / 100}</td> //price=API data//
    </tr> 

    `;
            Total += product.price / 100;
          }
        }
      }
    }
    displayProduct();

    function calculatePrice() {
      totalityPrice.innerText = Total;
      console.log(Total);
      //localstoragesetItem//
    }
    calculatePrice();

标签： javascript

Answer 1

听起来里面有些东西localStorage不是购物车物品。在处理之前检查每个项目是否具有所有必需的属性。

而不是使用localStoage.length作为产品计数.cart span，使用products.length。

let totalityPrice = document.querySelector('.subtotal');
    let products = [];
    let Total = 0;
    function displayProduct() {
      if (localStorage.length > 0) {
        for (let key in localStorage) {
          let product = JSON.parse(localStorage.getItem(key));
          
          if (product && "title" in product && "price" in product) {
            products.push(key);
            cartTablebody.innerHTML += `

    <tr>
    <td>${product.title}</td>
    <td>${product.price / 100}</td> //price=API data//
    </tr> 

    `;
            Total += product.price / 100;
          }
        }
      }
    }
    displayProduct();

    function calculatePrice() {
      totalityPrice.innerText = Total;
      console.log(Total);
      document.querySelector('.cart span').textContent = products.length;;
    }
    calculatePrice();