在用户不登录的情况下将商品添加到购物车react.js和redux

Question

我正在单页应用程序中开发购物车。

目前，登录的用户可以将商品添加到购物车，我使用react、redux、Express.js 和 mongoose 将商品存储到猫鼬的用户表中，但现在我希望未登录的用户将商品添加到购物车。

面临逻辑问题，我如何管理这个问题，因为如果用户未登录，那么我如何存储用户添加的购物车项目？许多未登录的用户可以将商品添加到购物车，但我如何知道哪个购物车属于哪个用户，因为他们没有登录（如果我将购物车存储在数据库表中）。

例如我面临的问题：

1. 购物车物品的存储位置。

2. 如果我将它们保存在猫鼬数据库中，那么我如何知道哪个用户在哪个浏览器上将此商品添加到购物车，因为用户未登录并且它是单页应用程序，所以我无法像在 php 中那样利用会话。

3. 用户登录后，我将如何将购物车项目同步到用户，因为用户在浏览器上，并且当他将项目添加到购物车时我没有用户 ID。

Answer 1

维持状态在localStorage. 您可以将整个 json 字符串化并将其存储为一个名为cart

const cartObj = {
  item1: {},
  item2: {},
}

localStorage.setItem("cart", JSON.stringify(cartObj));

// getting back the object
const copyCartObj = JSON.parse(localStorage.getItem("cart"));

注意：如果您使用sessionStorage它，一旦关闭选项卡就会被销毁。所以你的要求是这样的，你使用它，否则就用localStorage。

希望这可以帮助。有任何疑问请在评论中告诉我。