需要本地存储与会话存储建议
Local Storage Vs Session Storage Advice needed
我正在构建一个 mini-swiggy 应用程序,用于销售仅具有基本功能的披萨。基本应用程序可用 here。此应用程序没有我想添加到此应用程序的 login/register 功能。我想在实现的同时学习会话存储。
我的问题是:
我是否应该在每次用户单击添加按钮时调用 API 并在数据库中更新购物车? (目前由反应上下文 API 使用本地存储处理,目前没有这样的数据库。在下订单时,我只是刷新本地存储)。
现在功能需要数据库
- login/register
- 每个用户的订单摘要
- 会话管理
- 管理员角色等
In 可以继续使用本地存储来更新购物车,并且仅在用户下订单时进行 API 调用。我可以在下订单后从本地存储中刷新购物车。(我觉得这是最佳选择,因为它会提高性能并减少服务器负载。)
这一切不使用 redux 也能实现吗?
请帮忙,考虑到我想让它成为一个具有最佳实践的应用程序,另外,如果你有一些好的资源请分享,我在这里有点新手。
如果您能想到任何其他功能,请告诉我:)
我建议使用 NextAuth for session management and authentication with combination of Strapi CMS 它对你的项目来说会很强大也很容易。
- 您应该在每次用户点击添加按钮时更新数据库,并在数据库中更新购物车。
- 您可以使用不同的用户身份验证方法,例如使用 google 登录方法,或者您可以使用 JWT(JSON Web 令牌)创建自定义用户身份验证。
- 在用户下订单之前将用户购物车信息保存在本地存储并不是一个好主意,购物车信息是重要的用户数据,您无法将用户购物车更新到用户所在的所有其他设备已登录,一旦用户删除浏览器数据,购物车数据也会消失,这对企业来说可能是一种重大损失。
- 你可以使用 react reducer 和 react 上下文来代替 redux。
很有意思的问题,我只回答一部分,不然读起来会很长:)
您是否需要进行 API 调用以在服务器端保存购物车,或者仅在下订单后才进行调用,这是关于您的应用程序本身的业务逻辑的问题。
问一个问题,“我是否希望我的用户能够将商品添加到购物车和 watch/update/edit 其内容,即使他们从不同的 machine/browser 登录?”
如果答案是肯定的,那么您肯定必须将您的购物车与服务器同步,这样它才能始终保持一致。为此,我建议设置一个队列,其中包含本地修改后的购物车的最新版本,一旦用户在 2000 毫秒内未对您的购物车执行任何操作,您就可以安全地进行 API 调用并坚持您数据库中购物车的信息。
这将减少您服务器的负载,因为人们可以通过点击 add
按钮 20 次来增加您购物车中的商品数量,在这种情况下,而不是发送 20 个请求到服务器一次一个,它只是延迟了持久化购物车的过程,直到用户停止与您的应用程序交互一些 X 毫秒。
首先,我想说我真的很喜欢你的 CSS :).
你不必使用 database 或 redux 来制作购物车系统,但你可以猜到它们有很好的机会。
数据库优势:
- 您可以在他的所有设备上显示用户的购物车。
- 只要用户没有删除,他的购物车就会一直存在
- 您可以访问所有组件的数据。 (困难)
- 这是很好的学习练习。
数据库缺点:
- 你需要一个 API 所以很难设置。
- 你的代码会比其他选择更复杂。
REDUX 优势
- 设置起来很容易。您不需要新项目。
- 您可以访问所有组件的数据。 (中等)
REDUX 缺点
- 其实我真的不知道redux有什么缺点:)(知道的请告诉我)
本地存储优势
- 很容易
- 您可以访问所有组件的数据。 (简单)
本地存储的缺点
- 您不能在其他设备上显示用户的购物车
我没有分开session storage因为它和local storage是一样的。唯一的区别是会话存储是 per-tab.
在我看来,你应该使用数据库。我知道这是一个基本的应用程序,但您可以通过这种方式学到很多东西。
这些是我的建议:
我正在构建一个 mini-swiggy 应用程序,用于销售仅具有基本功能的披萨。基本应用程序可用 here。此应用程序没有我想添加到此应用程序的 login/register 功能。我想在实现的同时学习会话存储。
我的问题是:
我是否应该在每次用户单击添加按钮时调用 API 并在数据库中更新购物车? (目前由反应上下文 API 使用本地存储处理,目前没有这样的数据库。在下订单时,我只是刷新本地存储)。
现在功能需要数据库
- login/register
- 每个用户的订单摘要
- 会话管理
- 管理员角色等
In 可以继续使用本地存储来更新购物车,并且仅在用户下订单时进行 API 调用。我可以在下订单后从本地存储中刷新购物车。(我觉得这是最佳选择,因为它会提高性能并减少服务器负载。)
这一切不使用 redux 也能实现吗?
请帮忙,考虑到我想让它成为一个具有最佳实践的应用程序,另外,如果你有一些好的资源请分享,我在这里有点新手。
如果您能想到任何其他功能,请告诉我:)
我建议使用 NextAuth for session management and authentication with combination of Strapi CMS 它对你的项目来说会很强大也很容易。
- 您应该在每次用户点击添加按钮时更新数据库,并在数据库中更新购物车。
- 您可以使用不同的用户身份验证方法,例如使用 google 登录方法,或者您可以使用 JWT(JSON Web 令牌)创建自定义用户身份验证。
- 在用户下订单之前将用户购物车信息保存在本地存储并不是一个好主意,购物车信息是重要的用户数据,您无法将用户购物车更新到用户所在的所有其他设备已登录,一旦用户删除浏览器数据,购物车数据也会消失,这对企业来说可能是一种重大损失。
- 你可以使用 react reducer 和 react 上下文来代替 redux。
很有意思的问题,我只回答一部分,不然读起来会很长:)
您是否需要进行 API 调用以在服务器端保存购物车,或者仅在下订单后才进行调用,这是关于您的应用程序本身的业务逻辑的问题。
问一个问题,“我是否希望我的用户能够将商品添加到购物车和 watch/update/edit 其内容,即使他们从不同的 machine/browser 登录?”
如果答案是肯定的,那么您肯定必须将您的购物车与服务器同步,这样它才能始终保持一致。为此,我建议设置一个队列,其中包含本地修改后的购物车的最新版本,一旦用户在 2000 毫秒内未对您的购物车执行任何操作,您就可以安全地进行 API 调用并坚持您数据库中购物车的信息。
这将减少您服务器的负载,因为人们可以通过点击 add
按钮 20 次来增加您购物车中的商品数量,在这种情况下,而不是发送 20 个请求到服务器一次一个,它只是延迟了持久化购物车的过程,直到用户停止与您的应用程序交互一些 X 毫秒。
首先,我想说我真的很喜欢你的 CSS :).
你不必使用 database 或 redux 来制作购物车系统,但你可以猜到它们有很好的机会。
数据库优势:
- 您可以在他的所有设备上显示用户的购物车。
- 只要用户没有删除,他的购物车就会一直存在
- 您可以访问所有组件的数据。 (困难)
- 这是很好的学习练习。
数据库缺点:
- 你需要一个 API 所以很难设置。
- 你的代码会比其他选择更复杂。
REDUX 优势
- 设置起来很容易。您不需要新项目。
- 您可以访问所有组件的数据。 (中等)
REDUX 缺点
- 其实我真的不知道redux有什么缺点:)(知道的请告诉我)
本地存储优势
- 很容易
- 您可以访问所有组件的数据。 (简单)
本地存储的缺点
- 您不能在其他设备上显示用户的购物车
我没有分开session storage因为它和local storage是一样的。唯一的区别是会话存储是 per-tab.
在我看来,你应该使用数据库。我知道这是一个基本的应用程序,但您可以通过这种方式学到很多东西。
这些是我的建议: