Local Storage Vs Session Storage Advice needed

Question

I am building a mini-swiggy application for selling pizza only with basic functionalities. The basic app is available here. This app doesn't have a login/register feature which I want to add to this app. I want to learn session storage while implementing this.

My question is:

• should I make an API call for every time the user clicks on the add button, and update the cart at the database? (Currently being handled by react context API using local storage, there is no database as such for now. On placing the order I am simply flushing the local storage).

• Now the database is required for features

  • login/register
  • order Summary for each user
  • session management
  • admin roles etc.

• In could just keep using local storage for updating the carts and only make an API call when the user places an order. And I can flush the cart from local storage once the order is placed.(This is I feel is more optimal since it will be better for performance and reduce the server load as well.)

Can all this be achieved without using redux?

Kindly help, considering I want to make it an app with best practices, Also if you have some good resources please share, I am kinda newbie here.

In case you could think of any other features please let me know :)

Answer 1

to begin with, I want to say I really liked your CSS :).

You don't have to use a database or redux for making a cart system, but as you can guess they have good opportunities.

---

DATABASE ADVANTAGES:

1. You can show the user's cart on all his devices.
2. User's cart will be always here as long as he did not delete it.
3. You can reach the data on all components. (hard)
4. It's very good practice for learning.

DATABASE DISADVANTAGES:

1. You need an API so, it's hard to set up.
2. Your code will be more complicated than other choices.

---

REDUX ADVANTAGES

1. It's kinda easy to set up. You don't need a new project.
2. You can reach the data on all components. (medium)

REDUX DISADVANTAGES

1. Actually I really don't know any disadvantages of redux :) (pls tell me if you know)

---

LOCALSTORAGE ADVANTAGES

1. Very easy
2. You can reach the data on all components. (easy)

LOCALSTORAGE DISADVANTAGES

1. You can't show a user's cart on another device

---

I didn't separate session storage because it's the same as local storage. The only difference is session storage is per-tab.

In my opinion, you should use a database. I know it's a basic app but you can learn a lot of things by doing it this way.

And these are my recommendations:

1. cookies vs local vs session storage

2. ECommerce site with backend

Answer 2

Very interesting question, I will answer only one part of it, otherwise it will get too long to read :)

Whether you need to make an API call to persist the cart server-side or just do it only once the order has been placed is a question regarding the business logic of your app itself.

Ask a question, "Do I want my users to be able to add items to the cart and watch/update/edit its' content even if they log in from a different machine/browser?"

If the answer is yes then for sure you have to synchronize your cart with the server so it can be consistent always. For this purpose I would suggest having sort of a queue, which will have the last version of the locally modified cart, once the user did no action for 2000ms to your cart, you can safely make an API call and persist the information of the cart in your DB.

This will reduce the load to your server, because people can increment the number of items you have in the cart by clicking 20 times on the add button, in this case, instead of sending 20 requests to the server one at a time, it simply delays the process of persistent the cart, until the user stops interacting with your app for some X amount of milliseconds.

Answer 3

1. You should update the database every time the user clicks on the add button, and update the cart at the database.
2. You can use different user authentication methods like using the google sign-in method or you can create a custom user authentication using JWT(JSON Web Token).
3. Having user cart info at local storage until the user places the order wouldn't be a good idea, cart info is critical user data, and you can't update the user cart to all the other devices where the user has logged in, and the cart data will also get vanished once user deletes the browser data, which could be a signification loss to the business.
4. Instead of redux you can use react reducer with react context.

Answer 4

I suggest using NextAuth for session management and authentication with combination of Strapi CMS it will be strong and easy for your project.