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

Posted 2023-02-22

【中文标题】在没有用户登录 react.js 和 redux 的情况下将商品添加到购物车

【英文标题】：Add Items to cart without the user logged in react.js and redux

【发布时间】：2019-07-29 16:07:35

【问题描述】：

我正在处理单页应用程序中的购物车。

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

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

例如我面临的问题：

购物车物品的存储位置。

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

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

【问题讨论】：

我建议在浏览器中使用 localStorage。

@Molda 感谢您的回答，但您能否解释一下它是如何工作的，因为我是新来的反应和 redux 希望您不要介意...

【参考方案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。

希望这会有所帮助。如有任何疑问，请在 cmets 中联系我。