Web Storage API: Browser Key-Value Stores
Web Storage provides simple browser key-value stores: `localStorage` and `sessionStorage`. Use `localStorage` for data that persists across sessions, like user settings, and `sessionStorage` for data tied to a single tab.
The DOM: Your HTML as a Live Object Tree
The DOM is the browser's live model of a webpage, represented as a tree of objects. JavaScript uses it to find elements, change content, and react to clicks. The footgun: DOM changes are in-memory; they don't edit the original HTML file on the server.
The `document` Object: Your Page's API
The `document` object is the root of the DOM tree, representing the entire webpage in your script. Use it to find elements (`getElementById`), create new ones (`createElement`), or read page info. The main footgun: accessing an element before it's been parsed.
The `window` Object: Your Browser's Global Scope
Think of the `window` object as the global stage for your JavaScript. It represents the browser tab and holds all global variables and APIs like `fetch` and `setTimeout`. You use it constantly, often implicitly.