Search code examples
javascriptreactjslocal-storagesession-cookiesshopping-cart

Local Storage Vs Session Storage Advice needed

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 :)

Solution

  • 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