Skip to content

[Feature]: Implement cart persistence using localStorage so the cart survives page refresh and browser tab close #597

Description

@divyanshim27

Summary

ChaatBazaar has a cart and checkout system built in vanilla JavaScript. Currently, if a user adds items to their cart and then refreshes the page or opens the site in a new tab, the cart is wiped clean because cart state lives only in memory (JavaScript variables). For a food ordering platform where users browse, decide, and then check out — often across multiple sessions — this is a significant usability problem.

Problem
Cart state is stored in a JavaScript variable/array in script.js and is reset on every page load.
Users who refresh the page during browsing lose all their cart selections.
There is no mechanism to persist the cart between tabs, meaning if a user opens the menu in one tab and the cart in another, they see different states.
This is a feature explicitly listed in the README under "Contributor Features (Areas for Expansion)" — the Favourites List — and cart persistence is a natural prerequisite for it.
Impact
Users lose their cart on every page refresh, creating friction and likely abandoned orders.
The checkout flow (which includes a 5 km delivery radius check) becomes frustrating if users have to re-add items after any navigation.
Proposed Solution

I will implement cart persistence using localStorage so the cart state survives page reloads, tab closes, and browser restarts.

Implementation Plan:

On every cart mutation (add item, remove item, update quantity), serialize the cart array to localStorage:
js
// cart.js — save cart
function saveCart(cart) {
localStorage.setItem('chaatbazaar_cart', JSON.stringify(cart));
}

// cart.js — load cart on page init
function loadCart() {
const saved = localStorage.getItem('chaatbazaar_cart');
return saved ? JSON.parse(saved) : [];
}
On DOMContentLoaded, hydrate the cart UI from localStorage before rendering.
On successful checkout / order placement, clear the localStorage cart entry.
Add a cart item count badge to the navigation that reads from the persisted cart on every page load.

I will also add a "Clear Cart" button that clears both the in-memory state and the localStorage entry.

Could you assign this issue to me?

Labels: enhancement, feature, good first issue, GSSoC 2026

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions