Javascript 如何创建可编辑购物车项目

我正在造一辆购物车。下面我的

显示对象

是购物者可用的数据。

购物车对象

表示购物车中的购物者选择。我遇到的问题是，假设有人想编辑购物车中的项目并更改其大小。

尺码

在购物车项目中不再可用，因为我已经选择了一个尺码并删除了其余的尺码

// display object
{
    "sizes": [
        {
            "price": 4.99,
            "title": "s"
        },
        {
            "price": 5.99,
            "title": "m"
        },
        {
            "price": 6.99,
            "title": "l"
        }
    ],
    "desc": "here's our green hat",
    "title": "green hat"
}

// cart object
{
    "size": 
    {
        "price": 4.99,
        "title": "s"
    },
    "desc": "here's our green hat",
    "title": "green hat"
}

---

那么……我是否应该将我的整个

显示对象
&标记（以某种方式）选择了哪个选项？或者我还缺少另一个解决方案吗？
如果您的购物项目经常变化，您必须从后端系统中再次带来，以确保数据一致。此时最好调用数据库并获取所有大小的整个对象。此解决方案还可以更好地反映您物品的当前状态（可能是L码，但现在不是在决定更改之后，因为它在购买中有大量流量）

提示：您可以允许后端系统缓存经常使用其大小调用的项目，以获得更好的性能结果

但是，如果您的购物项目通常不可更改或更新，则最好将所有尺寸的整个对象传递给新属性，以识别所选的对象。
通过将所有可能的选项包含在每个对象中，您可能会得到大量冗余信息。为什么不将对象的信息保存在angular服务中（可以从DB或某种后端提取）。然后是一种获取对象信息并进行相应设置的方法？是的，但是有没有更好的方法来组织我的模型，以便更容易地梳理以使用以前的输入重新填充新表单？