互联网大厂购物车系统设计

分享内容

1. 购物车系统主要业务
2. 购物车系统主要属性
3. 购物车系统设计原则(未登录和登录加购)
4. 暂存购物车存储设计
5. 用户购物车存储设计
6. 总结

​

1 主要功能

在用户选购商品时，下单前，暂存用户想购买的商品。

购物车对数据可靠性要求不高，性能也无特别要求，在整个电商系统是相对容易设计和实现的一个子系统。

购物车系统的主要功能：

• 把商品加入购物车（后文称 “加购”）
• 购物车列表页
• 发起结算下单
• 在所有界面都要显示的购物车小图标

支撑这些功能，存储模型如何设计？

只要一个 “购物车” 实体。

2 主要属性

打开京东购物车页面：SKUID（商品 ID）、数量、加购时间和勾选状态

“勾选状态” 属性，即在购物车界面，每件商品前面的那个勾选按钮，表示在结算下单时，是否要包含这件商品。至于商品价格和总价、商品介绍等都能实时从其他系统获取，无需购物车系统保存。

购物车功能简单，但设计购物车系统的存储时，仍有一些问题需考虑。

3 原则

3.1 思考

3.1.1 用户未登录，在浏览器中加购，关闭浏览器再打开，刚才加购的商品还在吗？

存在。

若用户未登录，加购的商品也会被保存在用户的电脑。即使关闭浏览器再打开，购物车的商品仍存在。

3.1.2 用户未登录，在浏览器中加购，然后登录，刚才加购的商品还在吗？

存在。

若用户先加购，再登录。登录前加购的商品就会被自动合并到用户名下，所以登录后购物车中仍有登录前加购的商品。

3.1.3 关闭浏览器再打开，上一步加购的商品还在吗？

不存在。

关闭浏览器再打开，这时又变为未登录状态，但是之前未登录时加购的商品已经被合并到刚刚登录的用户名下了，所以购物车是空的。

3.1.4 再打开手机，用相同的用户登录，第二步加购的商品还在吗？

存在。使用手机登录相同的用户，看到的就是该用户的购物车，这时无论你在手机 App、电脑还是微信中登录，只要相同用户，看到就是同一购物车，所以第 2 步加购的商品是存在的。

若不仔细把这些问题考虑清楚，用户使用购物车时，就会感觉不好用，不是加购的商品莫名其妙丢了，就是购物车莫名其妙多出一些商品。

要解决上面这些问题，只要在存储设计时，把握如下

3.2 原则

• 若未登录，需临时暂存购物车的商品
• 用户登录时，把暂存购物车的商品合并到用户购物车，并清除暂存购物车
• 用户登录后，购物车中的商品，需在浏览器、手机 APP 和微信等等这些终端保持同步

购物车系统需保存两类购物车：

• 未登录情况下的 “暂存购物车”
• 登录后的 “用户购物车”

4 “暂存购物车” 存储设计

4.1 保存在客户端 or 服务端？

若存在服务端，则每个暂存购物车都得有个全局唯一标识，这不易设计。保存在服务端，还要浪费服务端资源。所以，肯定保存在客户端：

• 节约服务器存储资源
• 无购物车标识问题

每个客户端就保存它自己唯一一个购物车即可，无需标识。

客户端存储可选择不多：

• Session

不太合适。SESSION 保留时间短，且 SESSION 的数据实际上还是保存在服务端

• Cookie
• LocalStorage

浏览器的 LocalStorage 和 App 的本地存储类似，都以 LocalStorage 代表。Cookie、LocalStorage 都可用来保存购物车数据。

选择哪种更好？各有优劣。这场景中，使用 Cookie 和 LocalStorage 最关键区别：

• 客户端、服务端的每次交互，都会自动带着 Cookie 数据往返，这样服务端可读写客户端 Cookie 中的数据
• LocalStorage 里的数据，只能由客户端访问

使用 Cookie 存储，实现简单，加减购物车、合并购物车过程，由于服务端可读写 Cookie，这样全部逻辑都可在服务端实现，并且客户端和服务端请求的次数也相对少。

使用 LocalStorage 存储，实现相对复杂，客户端和服务端都要实现业务逻辑，但 LocalStorage 好在其存储容量比 Cookie 的 4KB 上限大得多，而且不用像 Cookie 那样，无论用不用，每次请求都要带着，可节省带宽。

所以，选择 Cookie 或 LocalStorage 存储 “暂存购物车” 都行，根据优劣势选型即可：

• 设计的是个小型电商，Cookie 存储实现起来更简单
• 你的电商是面那种批发的行业用户，用户需加购大量商品，Cookie 可能容量不够用，选择 LocalStorage 更合适

​

4.2 数据格式

不管哪种存储，暂存购物车保存的都一样。参照实体模型设计，JSON 表示：

{
  "cart": [
    {
      "SKUID": 8888,
      "timestamp": 1578721136,
      "count": 1,
      "selected": true
    },
    {
      "SKUID": 6666,
      "timestamp": 1578721138,
      "count": 2,
      "selected": false
    }
  ]
}