Shopping cart persists across browser sessions

Carts stored only in React useState or non-persisted Zustand evaporate on refresh, tab close, and session timeout. Shoppers who added three items, got distracted, and returned thirty minutes later see an empty cart and abandon. Baymard Institute pegs abandonment around 70%, and volatile cart state compounds every other UX issue in this bundle. Lost cart data is lost revenue, and it disproportionately hurts mobile shoppers whose browsers aggressively reclaim memory.

Write cart state to localStorage on every mutation and hydrate from it on mount in src/hooks/useCart.ts. For logged-in users, sync to a persistent backend through src/app/api/cart/route.ts so the cart survives device switches. Do not gate persistence behind if (user) with no anonymous fallback.

const [cart, setCart] = useState(() => JSON.parse(localStorage.getItem('cart') ?? '[]'))
useEffect(() => { localStorage.setItem('cart', JSON.stringify(cart)) }, [cart])