Input HarborISSUE #30 of 46

web storage · localStorage · sessionStorage

FormaVSCaptain Invalid Input

Forma saysWeb Storage — localStorage and sessionStorage — saves key/value strings in the browser, no server needed.

localStorage persists across sessions until cleared; sessionStorage lasts only for the tab. Both store strings: setItem(key, value), getItem(key), removeItem, clear. To store objects, JSON.stringify on the way in and JSON.parse on the way out.

It's perfect for preferences, drafts, and local-first apps (this academy stores your progress here). Limits are ~5-10MB per origin, and it's readable by any script on the page — never store secrets.

Power-ups you unlock

localStorage persists · sessionStorage is per-tab
Stores strings — JSON.stringify/parse for objects
setItem / getItem / removeItem / clear
~5-10MB per origin · not for secrets

Captain Invalid Input attacks — common mistakes

Storing an object directly (it becomes "[object Object]")
Putting tokens or secrets in localStorage (XSS-readable)
Assuming unlimited space — quota errors on big writes

Boss battleSave a counter to localStorage that survives reload, and a note to sessionStorage that does not.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <p>reloads (persists): <b id="n">0</b></p>
  <button id="b" style="font:inherit;color:#b388ff;background:none;border:1px solid #b388ff;padding:6px 12px;border-radius:3px">+1 and reload</button>
  <script>
    const n = +(localStorage.getItem('count')||0);
    document.getElementById('n').textContent = n;
    document.getElementById('b').onclick = () => { localStorage.setItem('count', n+1); location.reload(); };
  </script>
</body></html>

▶ Open the interactive comic issue

‹ Drag And Drop · Draggable · Datatransfer Web Workers · Background Threads ›