Browser APIs, in depth

Browser storage

localStorage.setItem("theme", "dark");
localStorage.getItem("theme");     // "dark" — always a string
localStorage.setItem("user", JSON.stringify({ name: "Ana" }));
JSON.parse(localStorage.getItem("user"));   // objects need to round-trip through JSON yourself
localStorage.removeItem("theme");

URL and URLSearchParams

const url = new URL("https://shop.example.com/search?q=js&page=2");
console.log(url.pathname);              // what happens?
console.log(url.searchParams.get("q")); // what happens?

url.searchParams.set("page", "3");
console.log(url.toString());   // what happens?

A parsed URL gives every piece (pathname, hostname, protocol) as its own property, and searchParams is a live, mutable view — editing it and reading url.toString() again reflects the change immediately, no manual query-string concatenation required.

Dry run: parsing and mutating the URL step by step

Step 4 never touches url.href or url.search directly — searchParams is a live view onto the same URL object, so mutating it is enough for step 5's toString() to reflect the change.

History and IntersectionObserver, briefly

history.pushState({ page: 2 }, "", "/products?page=2");  // changes the URL bar, no page reload
window.addEventListener("popstate", (e) => {
  console.log("back/forward pressed, state:", e.state);   // fires on browser back/forward, not on pushState itself
});

This is the mechanism every client-side router (React Router, Next.js's own routing) is built on — a URL that changes without a real navigation, plus a way to hear when the user manually goes back or forward.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) console.log(entry.target, "scrolled into view");
  });
});
document.querySelectorAll(".lazy-image").forEach((img) => observer.observe(img));

The standard, efficient way to know when an element enters or leaves the viewport — infinite scroll, lazy-loaded images, and "animate in on scroll" effects all run on this instead of a scroll listener doing math on every single pixel of scrolling.

Events, in depth — live

Click the innermost box below and watch the log. Every listener here is a real addEventListener call against the actual nested boxes on this page.

With the capture checkbox off (the default), clicking "inner" logs inner → middle → outer — the event starts at the exact element clicked and bubbles upward through every ancestor listening for it. Check the capture box and it reverses to outer → middle → inner — capture-phase listeners run on the way down, before the event even reaches its target. Check "stopPropagation" and only the inner listener fires at all — the click never continues past it in either direction.

Delegation and custom events

Bubbling is what makes event delegation work: one listener on a parent container, instead of one per child, checking event.target to see which child was actually clicked.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");    // works even if the click landed on a span INSIDE the li
  if (!item) return;
  console.log("clicked:", item.dataset.id);
});
// one listener handles every current AND future <li> — no re-binding when items are added later

const updated = new CustomEvent("cart:updated", { detail: { count: 3 } });
cartElement.dispatchEvent(updated);

cartElement.addEventListener("cart:updated", (e) => {
  console.log("new count:", e.detail.count);
});

A custom event bubbles and can be listened for exactly like a real browser event — the standard way for one part of a page to announce something happened without being directly wired to whoever might care.

Clipboard — reading and writing outside the page

await navigator.clipboard.writeText("copied!");        // should run from a real user gesture (a click), not on page load

button.addEventListener("click", async () => {
  const text = await navigator.clipboard.readText();   // asks permission the first time
  console.log("clipboard had:", text);
});

Both methods are async and both are gated behind a secure context (HTTPS or localhost) and, for anything beyond a same-origin write, a permission prompt. Reading the clipboard specifically is the more restricted half — a page silently reading whatever's on a user's clipboard on load would be a real privacy problem, so the browser insists on both a secure context and, in most browsers, the read happening inside a direct response to user input.

Page Visibility — knowing when nobody's looking

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    pauseVideo();
    stopPolling();
  } else {
    resumePolling();
  }
});

A tab that's minimized, in the background, or on a phone whose screen just locked doesn't stop running JavaScript — timers keep firing — but the user isn't watching. visibilitychange is the standard hook for pausing expensive work (video, polling, animation) exactly then, and resuming it the moment the tab becomes visible again, rather than burning battery and bandwidth on a tab nobody's looking at.

BroadcastChannel — talking to your own other tabs

const channel = new BroadcastChannel("cart-updates");

channel.postMessage({ itemCount: 3 });                 // every OTHER tab/window on the same origin hears this

channel.addEventListener("message", (event) => {
  console.log("another tab said:", event.data);
});

Same-origin tabs can already coordinate through the storage event (which fires when another tab writes to localStorage), but that only works as a side effect of actually storing something. BroadcastChannel is built for exactly this job directly — send a message to every other open tab of the same site, with no storage write required at all. Closing every tab connected to a channel is the only cleanup needed; there's no server, no polling, just same-origin tabs talking directly.

Web Share and Geolocation, briefly

await navigator.share({ title: "Check this out", url: location.href });   // hands off to the OS's native share sheet

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.log("denied or unavailable:", err.message)
);

Both need a real user gesture and a secure context, and both are permission-gated the same way clipboard reads are. navigator.share only exists where the OS has a native share sheet to hand off to — always feature-detect (if (navigator.share)) and fall back to your own share buttons where it's missing.