liminfoWeb API Reference
Free reference guide: Web API Reference
About Web API Reference
The Web API Reference is a searchable cheat sheet covering the essential browser APIs that JavaScript developers use daily. It includes DOM manipulation methods (querySelector, createElement, addEventListener, classList, MutationObserver, IntersectionObserver, ResizeObserver), Fetch API patterns for HTTP requests with AbortController cancellation and Response handling, and storage APIs spanning localStorage, sessionStorage, IndexedDB for structured data, and the Cache API for Service Worker caching strategies.
Beyond the basics, this reference covers Canvas 2D rendering with toDataURL/toBlob export and OffscreenCanvas for Web Worker graphics, three types of Workers (Web Worker for background threads, SharedWorker for cross-tab communication, Service Worker for offline support and network interception), real-time communication APIs (WebSocket for bidirectional streaming, Server-Sent Events for server push, BroadcastChannel for cross-tab messaging), and utility APIs including Clipboard read/write, Geolocation positioning, Notification alerts, Performance measurement marks, Web Crypto hashing and encryption, and URL/URLSearchParams parsing.
Each entry provides a concise description and a ready-to-use code snippet in JavaScript. All content renders in your browser with no server communication. The reference is organized into seven categories: DOM, Fetch, Storage, Canvas, Workers, WebSocket, and Others. It supports instant search filtering, dark mode, and responsive layout for desktop, tablet, and mobile. No dependencies or framework knowledge required - these are native browser APIs available in all modern browsers.
Key Features
- DOM API coverage: querySelector, querySelectorAll, createElement, addEventListener, classList, innerHTML, setAttribute, and three Observer APIs
- Fetch API patterns including GET, POST with JSON body, AbortController for request cancellation, Headers manipulation, and Response handling
- Four storage APIs compared: localStorage (persistent), sessionStorage (tab-scoped), IndexedDB (structured), and Cache API (HTTP caching)
- Canvas 2D context drawing, toDataURL/toBlob image export, and OffscreenCanvas for Web Worker rendering
- Web Worker, SharedWorker, and Service Worker patterns with postMessage communication examples
- Real-time APIs: WebSocket bidirectional communication, Server-Sent Events streaming, and BroadcastChannel cross-tab messaging
- Utility APIs: Clipboard read/write, Geolocation, Notification, Performance marks, Web Crypto digest, URL parsing
- Each entry includes MDN documentation links for deeper reference and browser compatibility details
Frequently Asked Questions
What browser APIs does this reference cover?
The reference covers 36 essential browser APIs organized into seven categories: DOM (querySelector, createElement, addEventListener, classList, MutationObserver, IntersectionObserver, ResizeObserver), Fetch (fetch GET/POST, AbortController, Headers, Response), Storage (localStorage, sessionStorage, IndexedDB, Cache API), Canvas (2D context, toDataURL, toBlob, OffscreenCanvas), Workers (Web Worker, SharedWorker, Service Worker), WebSocket (WebSocket, Server-Sent Events, BroadcastChannel), and Others (Clipboard, Geolocation, Notification, Performance, Web Crypto, URL).
How do I use the Fetch API examples?
The reference provides ready-to-use code snippets. For a basic GET request: "const res = await fetch('/api/data'); const data = await res.json();". For POST: include method, headers with Content-Type, and JSON.stringify the body. The AbortController entry shows how to cancel in-flight requests with ctrl.abort(). All examples use modern async/await syntax and can be pasted directly into your browser console or project code.
What is the difference between localStorage and IndexedDB?
localStorage is a simple key-value store with string values, synchronous access, and roughly 5MB storage limit per origin - ideal for small settings and preferences. IndexedDB is a full transactional database supporting structured data with indexes, asynchronous access, and much larger storage capacity (hundreds of MB). Use localStorage for simple data like user preferences; use IndexedDB for complex structured data like offline caches, large datasets, or application state.
When should I use Web Workers vs Service Workers?
Web Workers run JavaScript in a background thread to avoid blocking the main UI thread - use them for CPU-intensive computations like data processing, image manipulation, or complex calculations. Service Workers sit between the network and your page, intercepting fetch requests for offline support, caching strategies, and push notifications. SharedWorkers allow multiple tabs/frames to share a single worker instance for coordinated state. Each serves a distinct purpose in the browser threading model.
How do the Observer APIs work?
The three Observer APIs provide efficient event-driven monitoring. MutationObserver watches for DOM changes (child additions, attribute modifications). IntersectionObserver detects when elements enter or leave the viewport - essential for lazy loading images and infinite scroll. ResizeObserver fires when elements change size, useful for responsive component logic. All three use a callback pattern with an observe() method and are more performant than polling or scroll event listeners.
What real-time communication options are available?
WebSocket provides full-duplex bidirectional communication over a persistent connection - ideal for chat, gaming, and live data feeds. Server-Sent Events (EventSource) offer one-way server-to-client streaming over HTTP, simpler than WebSocket when you only need server push. BroadcastChannel enables cross-tab messaging within the same origin without a server, useful for syncing state across multiple open tabs of the same application.
Are these APIs available in all browsers?
The APIs in this reference are supported in all modern evergreen browsers (Chrome, Firefox, Safari, Edge). Some newer APIs like OffscreenCanvas, BroadcastChannel, and certain Web Crypto methods may have partial support in older browser versions. Each entry includes an MDN link where you can check detailed browser compatibility tables. The core APIs (DOM, Fetch, localStorage, Canvas, Web Worker, WebSocket) have broad support across all current browsers.
Is this reference framework-specific?
No. All APIs in this reference are native browser APIs built into JavaScript and available without any framework or library. They work in vanilla JavaScript, React, Vue, Angular, Svelte, or any other framework. The code examples use plain JavaScript syntax so you can adapt them to any project. This makes the reference useful whether you are building a simple static page or a complex single-page application.