Browser and Events17% of the exam
Browser APIs: storage, fetch, timers and workers
Pick the browser API a requirement calls for: localStorage versus sessionStorage and the cross-tab storage event, fetch's resolve-on-404 rule and AbortController timeouts, debouncing with timers, requestAnimationFrame, IntersectionObserver, Web Workers, the History API and URLSearchParams, Geolocation and the Page Visibility API.
Given a scenario and requirements, utilize browser specific APIs.
~7 min read · 13 practice questions ·
What the exam expects
- Store and read data with
localStorageandsessionStorage, serializing objects, and sync tabs with thestorageevent. - Call
fetch()correctly: checkresponse.ok, catch network failures, and add a timeout withAbortController. - Schedule work with
setTimeout/clearTimeout(debounce),requestAnimationFrame,IntersectionObserverand Web Workers. - Route a single-page app with
history.pushStateandpopstate, navigate withlocation.replace, and read query strings withURLSearchParams. - Use Geolocation and the Page Visibility API within their permission and event rules.
- Key terms: Web API (a browser-provided interface, not part of the JavaScript language); origin (scheme, host and port that partition storage); debounce (run only after input pauses); main thread (where page JavaScript, rendering and input share time); session history (the entries Back and Forward move through).
Key facts
Web Storage values
- Detail
- Always strings; serialize objects with
JSON.stringify()
localStorage vs sessionStorage- Detail
- Origin-wide and persistent vs per tab, cleared when the tab closes
storage event- Detail
- Fires in other same-origin windows, never the one that changed storage
fetch() on 404 or 500- Detail
- Resolves; check
response.okorstatus
Aborted
fetch()- Detail
- Rejects with
DOMExceptionnamedAbortError
requestAnimationFrame- Detail
- One-shot, before next repaint, paused in background tabs
Web Worker limits
- Detail
- No direct DOM access; messages are copied
pushState()- Detail
- Changes URL without loading it; same origin only; no
popstate
location.replace()- Detail
- Current page is not kept in session history
URLSearchParams.get()- Detail
- First value as a string, or
null
Geolocation
- Detail
- HTTPS only, user permission, callbacks, returns
undefined
Sources for this section (10)
- Using the Web Storage APIdeveloper.mozilla.org (opens in a new tab)
- Web Storage APIdeveloper.mozilla.org (opens in a new tab)
- storage eventdeveloper.mozilla.org (opens in a new tab)
- fetch()developer.mozilla.org (opens in a new tab)
- requestAnimationFrame()developer.mozilla.org (opens in a new tab)
- Using Web Workersdeveloper.mozilla.org (opens in a new tab)
- pushState()developer.mozilla.org (opens in a new tab)
- Location.replace()developer.mozilla.org (opens in a new tab)
- URLSearchParams.get()developer.mozilla.org (opens in a new tab)
- getCurrentPosition()developer.mozilla.org (opens in a new tab)
- Why does a cross-tab logout listener never fire during a one-tab test?
- When does a `fetch()` promise reject?
- Why must an animation callback call `requestAnimationFrame` again?
- Which navigation call keeps an interstitial page out of the Back history?
- How does a Web Worker return its result to the page?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the JavaScript Developer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 24 lessons of the JavaScript Developer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (13 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams