Browser APIs and URL State

History State

Browser State Becomes Page State

The History API stores a section choice without repainting the page. The replay shows when that browser state becomes visible DOM state.

Program

The source writes history state, reads it back, then maps that value to a data attribute and label.

history_state.js 
const panel = document.querySelector('#history-panel');
const label = document.querySelector('#history-label');

history.replaceState({ section: 'activity' }, '', '?section=activity');

const section = history.state.section;

panel.dataset.section = section;

label.textContent = `history: ${section}`;
History API The History API can update browser navigation state without loading a new page.
replaceState `history.replaceState(state, title, url)` replaces the current history entry. It changes browser state, not page markup.
state mapping Browser state becomes useful to learners when code maps it onto DOM attributes, text, or styles.