Component Storage Replay - Web Replay Lab

A small component reads localStorage, updates DOM state, and renders keyframes that distinguish source changes from browser output.

Program

Client API lessons become clearer when the replay shows storage, DOM state, and rendered output as separate frames.

component_storage_replay.html

<button id="mode">Toggle mode</button><section id="panel">Light mode</section>
<script>
  const modeButton = document.querySelector("#mode");
  const panel = document.querySelector("#panel");
  const saved = localStorage.getItem("mode") || "light";
  panel.dataset.mode = saved;
  modeButton.addEventListener("click", () => {
    const next = panel.dataset.mode === "light" ? "dark" : "light";
    panel.dataset.mode = next;
    localStorage.setItem("mode", next);
    panel.textContent = next + " mode";
  });
</script>

selected capture A teaching replay can choose storage and DOM keyframes instead of every executed line.

state mutation The page state changes in storage, dataset, and visible text.