刷新后本地存储未更新 angular

Question

在我刷新浏览器以从 localstorage 检索数据并更新该数据后，它没有更新。但是当我添加新项目并更新它时，它正在更新。这似乎是什么问题？

//----- update existing item's subtotal in localstorage
        
   changeSubtotalOfExisting(qty ) {

       let updateQty = JSON.parse(localStorage.getItem('cart_items'));
         updateQty['qtyTotal'] = qty;
        localStorage.setItem("cart_items", JSON.stringify(updateQty));
        console.log('updateQty: ', updateQty );
    }

这是一个 stackblitz 示例： https://stackblitz.com/edit/angular-ivy-i8kpub?file=src/app/app.component.ts

Answer 1

您的实施存在几个问题。无法保存到本地存储只是其中之一。我最终重写了很多，实际上大大简化了。如果这不是您提出问题的意图，我深表歉意。这是生成的项目：https://stackblitz.com/edit/angular-cart-local-storage。您可以比较这两个项目。

我在这里列出一些关键问题：

访问本地存储应该只从服务完成，而不是从组件。该服务负责保存和检索数据。该组件负责与用户交互。
您将错误的对象保存到本地存储（也许这就是您最初问题的答案）。本地存储应存储购物车（项目列表）。例如，这里您尝试保存到本地存储，就好像它一次只存储一项：

updateQty['qtyTotal'] = qty; localStorage.setItem("cart_items", JSON.stringify(updateQty));
您调用的事件处理程序使用了错误的参数。您需要使用项目作为参数来调用它们，而不是 HTML 元素。我调用 changeSubtotal(item ,i)
而不是 changeSubtotal($event.target, addedItem.variationCost,i)
您没有阻止用户多次将同一商品添加到购物车。
您添加到购物车的商品的初始数量应该是 1 而不是 0，因为您将数量控制的最小值设置为 1

刷新后本地存储未更新 angular

localstorage not updated after refresh angular

javascript

local-storage

angular