Core question: How does a website remember who you are, what is in your shopping cart, or that you prefer Dark Mode after you refresh the page?

🍏 Tutor’s Notes

When we looked at the Request ↔ Response Cycle, we saw how a client asks a server for data and the server replies. Here is a quirk about that cycle that surprises almost every beginner: by default, HTTP is completely stateless (it has no memory).

As far as basic HTTP is concerned, every time you click a link or refresh a page, you are a total stranger meeting the server for the very first time. Without some way to remember state on your device:

• You would have to type your username and password on every single page click.
• If you toggled a website to Dark Mode and refreshed the page, it would flash right back to blinding Light Mode.
• If you accidentally refreshed a page while filling out a form, everything you typed would vanish.

While websites store permanent account data in a database on the Server, reaching across the internet just to check if you prefer Dark Mode—or to figure out which user is sending a request—needs help from the client. To solve this, browsers provide Browser Storage: built-in digital compartments right on your device where websites can save data for instant access.

The Analogy: Wristbands, Notebooks, Sticky Notes, and Filing Cabinets

Browsers give developers several different storage compartments because different types of data have different rules. Think of them like four everyday items:

• Cookies (The VIP Wristband): A tiny wristband the server straps onto your wrist when you log in. Every time you walk up to the server's counter (send an HTTP request), the browser automatically flashes your wristband so the server knows who you are.
• LocalStorage (The Permanent Notebook): A notebook kept in your desk drawer at home. The server never sees what is written inside unless you explicitly read a page out loud to it. Even if you close your browser, turn off your laptop, and come back next month, your notes are still sitting in that drawer.
• SessionStorage (The Disposable Sticky Note): A sticky note stuck to a single browser tab. As long as that tab stays open, the note stays there. The second you close that tab, the sticky note goes straight into the shredder.
• IndexedDB (The Filing Cabinet): A heavy-duty storage cabinet inside your browser capable of holding thousands of complex documents, files, and offline data (used by web apps like Notion, Figma, and Google Docs).

Deep Dive: The Core Storage Mechanisms

1. Cookies

Invented in 1994 so early online shops could build working shopping carts, Cookies are the oldest storage mechanism on the web. Despite the name, a cookie is just a tiny snippet of text saved in your browser.

• Size Limit: Extremely small—only 4 KB (roughly one short paragraph of text).
• Superpower: Cookies are automatically attached to every HTTP Request your browser sends to that server. You don't have to write extra frontend code to send them; the browser slips them into the Request Headers for you.
• Lifespan: Configurable. A cookie can expire when you close the browser (a Session Cookie), or the server can give it a specific expiration date (e.g., "Expire in 30 days").