What is the difference between localStorage and IndexedDB?

localStorage is a simple synchronous key-value store limited to about 5 MB of strings, ideal for small flags and preferences. IndexedDB is an asynchronous transactional database that stores large structured data and binary blobs, suited to offline apps and caches. Use localStorage for tiny values and IndexedDB for real data.

When should I use the Fetch API versus XMLHttpRequest?

Fetch is the modern promise-based API for HTTP requests and supports streaming, AbortController cancellation, and a clean Request/Response model. XMLHttpRequest is the older callback API kept mainly for legacy code and upload-progress events. Prefer fetch for new code.

What does IntersectionObserver do?

IntersectionObserver asynchronously reports when an element enters or leaves the viewport or a scroll container, without the jank of scroll-event listeners. It powers lazy-loading images, infinite scroll, and visibility analytics efficiently because the browser batches the work off the main thread.

What is a Web Worker?

A Web Worker runs JavaScript on a background thread so heavy computation does not block the UI. It communicates with the main thread by posting serializable messages and cannot touch the DOM directly. Use it for parsing, image processing, or any CPU-heavy task that would otherwise freeze the page.

Which APIs require a secure context?

Many powerful APIs only work over HTTPS or localhost, including Service Workers, the Geolocation API, the Clipboard API, Web Crypto's SubtleCrypto, and getUserMedia. Browsers gate them behind a secure context to protect users, so they silently fail or reject on plain HTTP pages.

What is the Browser Web APIs Quick Reference?

Searchable quick reference of browser Web APIs grouped by category — networking, storage, DOM, observers, workers, media, and device. Each entry summarises what the global does, its key entry point, and a usage note. It runs free in your browser on Gera Tools, with nothing uploaded.

Browser Web APIs Quick Reference

Name: Browser Web APIs Quick Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

The browser exposes hundreds of global APIs and remembering which object is the entry point for a given task is half the battle. This quick reference groups the Web APIs you reach for most — networking, storage, DOM, observers, workers, media, and device — with the global name, its purpose, and a usage note.

How it works

Each entry names a browser global (a constructor like IntersectionObserver, a namespace like navigator.geolocation, or a function like fetch) and places it in a category:

Networking — fetch, WebSocket, EventSource, XMLHttpRequest.
Storage — localStorage, sessionStorage, indexedDB, caches, Cookie Store.
DOM & events — document, CustomEvent, MutationObserver.
Observers — IntersectionObserver, ResizeObserver, PerformanceObserver.
Workers — Worker, SharedWorker, ServiceWorker.
Media & graphics — Canvas, WebGL, Web Audio, getUserMedia.
Device & misc — Geolocation, Clipboard, Notifications, Web Crypto.

Choosing the right API for common tasks

HTTP requests

Prefer fetch for all new code. It returns a Promise, supports async/await, accepts AbortController for cancellation, and has a clean Request/Response model with streaming support. Use XMLHttpRequest only for legacy code or when you specifically need upload progress events (the Fetch API’s ReadableStream can track download progress but XHR’s upload.onprogress is still easier for upload tracking).

Client-side data persistence

Small flags and preferences (under a few KB of strings): localStorage
Per-tab session state that should clear on close: sessionStorage
Structured data, offline caches, binary blobs, large datasets: indexedDB
Offline asset caching for PWAs: caches (Cache Storage, used via Service Worker)

The localStorage 5 MB limit bites more often than developers expect. If you are storing JSON arrays that grow over time, switch to IndexedDB before you hit it.

Observing DOM changes without scroll listeners

Scroll and resize event listeners run on every event, which causes layout thrashing if they read layout properties. The Observer APIs batch and defer notifications:

Task	API to use
Lazy-load images when in view	`IntersectionObserver`
Respond to element size changes	`ResizeObserver`
Watch DOM tree for additions/removals	`MutationObserver`
Measure rendering performance	`PerformanceObserver`

Off-main-thread processing

A Worker runs JavaScript on a background thread and communicates via postMessage. Use it for anything CPU-heavy — parsing large JSON, image manipulation, WebAssembly execution — so the UI does not freeze. SharedWorker lets multiple tabs or windows share one worker instance, useful for coordinating state across tabs. ServiceWorker is a network proxy layer for PWA caching and offline support.

The secure-context requirement

Many APIs only work on HTTPS or localhost. Attempting to use them on plain HTTP silently fails or throws. APIs that require a secure context include:

navigator.geolocation
navigator.clipboard (Clipboard API)
crypto.subtle (Web Crypto)
navigator.mediaDevices.getUserMedia
ServiceWorkerRegistration
Notification.requestPermission

During local development, localhost counts as a secure context, so these APIs work there. On any HTTP deployment they will not.

Prefer asynchronous, non-blocking patterns

The main thread controls rendering. Any synchronous, long-running operation on the main thread will freeze the page. Prefer:

fetch (async) over XMLHttpRequest with synchronous mode
IntersectionObserver over scroll event listeners with getBoundingClientRect
ResizeObserver over window resize listeners
A Worker for any computation that would take more than a few milliseconds