刷新角度后本地存储未更新答案

【问题标题】：localstorage not updated after refresh angular刷新角度后本地存储未更新
【发布时间】：2021-05-03 03:21:51
【问题描述】：

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

//----- 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

【问题讨论】：

我认为您需要制作字符串化对象的副本（而不是按原样更新），然后删除 localStorage 上一个项目，然后再次设置它，因为您可以设置它
没有必要删除前一项，因为setItem 会覆盖可能存在的值。难道qty 实际上并没有改变，这就是为什么你没有看到任何新价值？
在控制台上，我看到 qty 已更新，但本地存储未更新。我实际上重命名了该方法并在其上添加了“现有”。原来是 changeSubtotal() ，它们的过程几乎相同。我测试了 2 个不同数量的不同对象，它们正在控制台上更新。

标签： javascript angular local-storage

【解决方案1】：

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

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

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

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

【讨论】：