如何在 Angular 中保存购物车？答案

【问题标题】：How to save cart in Angular?如何在 Angular 中保存购物车？
【发布时间】：2020-08-31 17:04:18
【问题描述】：

我是 Angular 的新手，我正在尝试制作一个简单的电子商务，用户可以在其中将商品添加到购物车、查看它们并进行结帐。

所以我有 3 个组件，产品列表、购物车和结帐以及一个购物车服务，用于管理所有购物车操作，例如添加商品、删除和计算购物车总数。

我想知道当用户关闭浏览器并重新打开它时保存购物车的最佳解决方案是什么，因为最初用户订单将被匿名管理，因此无需任何注册。

在注册时使用 localstorage 和使用 cookie 仍然是最佳解决方案吗？

【问题讨论】：

会话存储怎么样？
如果我是你，我可能会混合使用 cookie（每个浏览器 cookie）并在购物车登录时将其存储在帐户信息中 - 例如。一个帐户数据库，包含用户名、密码、电子邮件和带有额外列的常用内容，购物车，它可以存储购物车中所有项目的数组（或 json、yaml 等）
SessionStorage 没有持久化，我会使用 LocalStorage 或者如果你有一个服务器应用程序，我会将购物车状态存储到数据库中。
LocalStorage 是您的任务的好选择，但最好从服务中返回。在 DB 和 localStorage 之间同步数据有时会造成糟糕的用户体验。

【解决方案1】：

保存在客户端的任何数据都可能被用户更改或删除，最好的选择是将数据作为临时存储在服务的数据库中，并在应用再次启动或在不同的浏览器中打开时获取值。

localStorge 将成为 sessionStorgae 的一个重要位置，因为数据在 localStorage 不会过期

使用 localStorge demo ?? 的示例购物车数据服务

sessionStorage 将在页面会话结束时清除。

只要浏览器打开，页面会话就会持续，并且会继续存在页面重载和恢复

【讨论】：

选择 localStorage，因为它似乎是最好的解决方案，也是最懒惰的解决方案，而注册/登录部分还没有准备好，很棒的例子，我使用 BehaviorSubject 来获取购物车项目的数量是不是更好使用获取？
示例只是一个演示，get 属性非常错误，因为它会在每次更改检测中运行，所以尝试任何方法都会好得多