Section 5: Browser Storage

The Big Picture: The Browser's Filing Cabinets

A browser remembers things for you: that you are logged in, your dark-mode choice, the logo image it already downloaded, a draft you were typing. It keeps these in several storage places, each built for a different job. Think of a desk with different drawers: sticky notes that travel with every letter (cookies), a small notebook per website (localStorage), a scrap pad that is thrown away when you leave (sessionStorage), a big filing cabinet (IndexedDB) and a stack of copies of things you fetched earlier (cache).

All sizes are rough and vary by browser and version. Browsers also limit total space per site and may delete data when the disk is nearly full.

The word origin (scheme + host + port) is explained in Section 6. For now: https://shop.example is one origin and https://mail.example is another, and each gets its own drawers.

5.1 Cookies

What it is: A cookie is a small piece of text (a name and a value, such as session=abc123) that a server asks the browser to save. The browser then sends it back automatically with every later request to that site.

 1st visit:   browser ── GET /login ───────────────────────► server
              browser ◄── Set-Cookie: session=abc123 ──────── server
 later:       browser ── GET /inbox
                         Cookie: session=abc123 ───────────► server
                                                  "Ah, it's you again."

HTTP has no memory: each request stands alone. Cookies are the trick that lets a site recognise you between requests. When you log in, the server gives you a random session ID in a cookie. Whoever holds that cookie is treated as you. That is why cookies are valuable to thieves, and why the flags below matter.

Important flags (set by the server in Set-Cookie):

Third-party cookies. A cookie set by a site other than the one in the address bar (for example an advertising frame). Browsers are limiting these for privacy; the exact policy is changing and differs between browsers.

5.2 Cache (the HTTP Cache and Cache Storage)

The HTTP cache. As shown in Section 4.4, the browser keeps copies of responses on disk and reuses them while "fresh". You do not control it from JavaScript; the browser decides using headers like Cache-Control. Its purpose: speed and less data used.

Cache Storage and service workers. Pages can also keep their own cache through the Cache Storage API, managed by code. This is used with a service worker: a script that the browser runs in the background (in its own worker, Section 3.2) which can intercept the page's network requests. A service worker can answer from Cache Storage when you are offline, which is how some websites work like apps ("Progressive Web Apps"). Service workers only run on HTTPS pages (plus localhost for developers).

Where is it on disk? The browser's data lives in your profile folder inside your user profile (Chapter 21 — Windows System Files and Directories). For Chrome, a typical location is:

 %LocalAppData%\Google\Chrome\User Data\Default
 %LocalAppData%\Microsoft\Edge\User Data\Default        (Edge, similar idea)

Inside, you will find folders and files for the cache, cookies, history and more. Exact paths and file names change between versions and Default is only the first profile; other profiles may be called "Profile 1" and so on. Cookies and saved passwords are encrypted with keys tied to your Windows account, so copying the files to another PC does not simply work. Do not open, edit or delete these files while the browser is running, and do not share them: they may contain login information. To clear caches safely, use the browser's own settings (5.6).

 %LocalAppData%\...\User Data\
   ├─ Default\          first profile (one folder per profile)
   │    ├─ (cache folders)
   │    ├─ (cookies, history, settings files)
   │    └─ (IndexedDB, Local Storage, Service Worker data)
   └─ (shared files for the whole browser)

5.3 localStorage

What it is: A simple key-value store per origin: you save a text under a name, and read it back later. It stays after you close the browser until the site or you delete it.

 localStorage.setItem("theme", "dark")      save
 localStorage.getItem("theme")              read back -> "dark"
 localStorage.removeItem("theme")           delete

Typical use: remembering a theme, a language choice or a draft.

5.4 sessionStorage

What it is: The same simple API as localStorage, but the data belongs to one tab and is deleted when that tab (or window) closes. Two tabs of the same site each get their own sessionStorage; reloading the page keeps it, but opening the link in a new tab starts empty.

Typical use: a multi-step form's progress, or data that should vanish when you leave.

5.5 IndexedDB

What it is: A real database inside the browser. It stores structured data: whole objects, lists, even files and images (blobs), organised in object stores with indexes for fast searching. It can hold much more than localStorage (often limited by a share of free disk space, so hundreds of MB or more).

Comparing the three key-value-ish choices:

 Need                                   Use
 ───────────────────────────────────    ───────────────────────────
 server must see it every request       cookie (small!)
 tiny setting, kept for a long time     localStorage
 temporary, this tab only               sessionStorage
 lots of structured or binary data      IndexedDB
 offline copies of files/responses      Cache Storage + service worker

5.6 Clearing Site Data

Why clear? To free space, fix a site that behaves oddly because of old saved data, or for privacy.

How (menu names may differ by browser and version):

1. Press Ctrl + Shift + Delete to open the "Clear browsing data" dialog, or open Settings and search for "clear browsing data". Choose a time range and what to clear (cookies and site data; cached images and files; history).
2. For one site only, open DevTools (F12) → Application tab → Storage → Clear site data. Or click the icon beside the address bar (padlock or settings icon) and look for cookies and site data.

What happens:

Private / Incognito windows use temporary storage that is deleted when you close the window. Your employer, school and internet provider can still see traffic and servers still see your IP address, so it is not invisible.

Summary