htmlintermediate
HTML5 APIs Quiz
LocalStorage, SessionStorage, Canvas, Geolocation, Web Workers, and HTML5 features.
7 questions
By EZ4Code Team
1. What is the storage limit of localStorage in most browsers?
1 MB
5 MB per origin
50 MB per origin
Unlimited
Explanation: Most browsers cap `localStorage` at ~5 MB per origin. It stores strings only (use `JSON.stringify` for objects). Data persists until explicitly cleared. `sessionStorage` has the same limit but clears when the tab closes.
2. Which API is used to draw graphics on a web page?
<canvas id="c" width="200" height="200"></canvas>
<script>
const ctx = c.getContext("2d");
ctx.fillRect(10, 10, 50, 50);
</script>Canvas API
SVG
WebGL only
DOM API
Explanation: The Canvas API draws 2D graphics via JavaScript on a `<canvas>` element. It's raster (pixel-based). SVG is vector-based and uses XML markup. WebGL is for 3D (also uses `<canvas>`). The DOM API manipulates HTML, not graphics.
3. What does `navigator.geolocation.getCurrentPosition()` do?
Gets the user's current location (with permission)
Gets the user's IP address
Gets the browser version
Gets the user's timezone
Explanation: The Geolocation API asks the user for permission, then returns their latitude/longitude. It's asynchronous and requires HTTPS. The callback receives a `Position` object with `coords.latitude` and `coords.longitude`.
4. What is a Web Worker?
A background service worker for caching
A JavaScript thread that runs in the background, separate from the UI
A type of HTML element
A CSS preprocessor
Explanation: Web Workers run JavaScript in a background thread, allowing CPU-intensive work without freezing the UI. They can't access the DOM directly — they communicate with the main thread via `postMessage`. Service Workers are a specific type for offline caching and push notifications.
5. Which method stores data in localStorage?
localStorage.setItem("key", "value");
const v = localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();setItem(key, value)
set(key, value)
add(key, value)
put(key, value)
Explanation: `localStorage.setItem(key, value)` stores data. `getItem(key)` retrieves it. `removeItem(key)` deletes one entry. `clear()` wipes everything. Both key and value must be strings — use `JSON.stringify` for objects.
6. What is the difference between localStorage and sessionStorage?
localStorage persists; sessionStorage clears when the tab closes
localStorage is smaller
sessionStorage is shared across tabs
They are identical
Explanation: `localStorage` persists indefinitely until cleared. `sessionStorage` is scoped to a single tab and clears when the tab closes. Both have ~5 MB limits and the same API. `sessionStorage` is NOT shared between tabs of the same origin.
7. Which element embeds audio in HTML5?
<audio src="song.mp3" controls></audio><audio>
<sound>
<mp3>
<media>
Explanation: `<audio>` embeds audio with attributes like `src`, `controls`, `autoplay`, `loop`, `muted`. For video, use `<video>`. There's no `<sound>`, `<mp3>`, or `<media>` element. The `controls` attribute shows the default play/pause UI.