Session Storage

// Exact same methods as localStorage:
sessionStorage.setItem("step", "3");
sessionStorage.getItem("step");     // "3"
sessionStorage.removeItem("step");
sessionStorage.clear();
sessionStorage.length;

// Store objects the same way:
sessionStorage.setItem("cart", JSON.stringify([
  { id: 1, name: "Widget", qty: 2 },
  { id: 2, name: "Gadget", qty: 1 },
]));

const cart = JSON.parse(sessionStorage.getItem("cart"));

// Decision guide:
// "Should the data survive closing the browser?"
//   YES → localStorage  (theme, language, settings)
//   NO  → sessionStorage (form wizard step, scroll pos)

// "Should other tabs see this data?"
//   YES → localStorage  (cart, login state)
//   NO  → sessionStorage (current page state)

// 1. Multi-step form wizard:
// Save progress as user moves through steps
function saveStep(step, data) {
  const wizard = JSON.parse(
    sessionStorage.getItem("wizard") || "{}"
  );
  wizard[step] = data;
  wizard.currentStep = step;
  sessionStorage.setItem("wizard", JSON.stringify(wizard));
}

// On page load, restore progress:
const wizard = JSON.parse(
  sessionStorage.getItem("wizard") || "{}"
);
if (wizard.currentStep) goToStep(wizard.currentStep);

// 2. Remember scroll position:
window.addEventListener("beforeunload", () => {
  sessionStorage.setItem("scrollY", window.scrollY.toString());
});
window.addEventListener("load", () => {
  const y = sessionStorage.getItem("scrollY");
  if (y) window.scrollTo(0, Number(y));
});

// 3. Prevent duplicate form submissions:
form.addEventListener("submit", () => {
  if (sessionStorage.getItem("submitted")) {
    alert("Already submitted!");
    return;
  }
  sessionStorage.setItem("submitted", "true");
  // proceed with submission...
});

// 4. One-time welcome messages:
if (!sessionStorage.getItem("welcomeShown")) {
  showWelcomeBanner();
  sessionStorage.setItem("welcomeShown", "true");
}

// Tab A:
sessionStorage.setItem("tab", "A");

// Tab B (same URL, opened separately):
sessionStorage.getItem("tab"); // null (isolated!)
sessionStorage.setItem("tab", "B");

// Tab A still has: "A"
// Tab B has: "B"

// Exception: duplicated tabs
// If you Ctrl+click/Cmd+click a link or "Duplicate tab",
// the new tab COPIES sessionStorage from the original.
// After that, they're independent.