1.16 — Browser Functionalities: Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

1. Skim before labs or interviews.
2. Gaps — README.md → 1.16.a…1.16.d.
3. Drills — 1.16-Exercise-Questions.md.
4. Polish — 1.16-Interview-Questions.md.

---

BOM at a glance

Object	Role
window	Global object, viewport, timers, sub-objects
document	DOM root
navigator	Browser / device / capability info
location	Current URL + navigation
history	Back/forward + pushState / replaceState

---

location

Task	Code idea
Full URL	location.href
Path + query	pathname, search, hash
Navigate	location.href = url or location.assign(url)
Replace entry	location.replace(url)
Reload	location.reload()

---

history

history.back();
history.forward();
history.go(-1);
history.pushState(state, "", "/new-path");
history.replaceState(state, "", "/replace");
window.addEventListener("popstate", handler);

---

Storage

API	Scope	Lifetime
localStorage	Origin	Until cleared
sessionStorage	Origin per tab	Tab/window
Cookies	Origin + path/domain attrs	Expires / max-age / session

localStorage.setItem("k", "v");
localStorage.getItem("k");
JSON.stringify(obj); JSON.parse(str);
document.cookie = "name=value; path=/; max-age=60";

HttpOnly → not readable from JS.

---

fetch

const res = await fetch(url, { method, headers, body });
if (!res.ok) throw new Error(res.status);
const data = await res.json();

• Resolved on many HTTP errors — check ok.
• Rejects mainly on network failure.
• CORS — cross-origin needs server headers.

---

Master workflow

1. BOM — use window / navigator / location / history for environment + navigation.
2. Persist prefs — localStorage; tab state — sessionStorage; HTTP-visible small state — cookies.
3. Network — fetch + ok + parse once + try/catch.
4. SPA URL — pushState + popstate to keep UI in sync.

---

End of 1.16 quick revision.