AI Artifacts & Generated Sites

localStorage

Definition

localStorage is the simplest form of browser storage the web platform offers. A page calls localStorage.setItem with a key and a value, and the browser writes it to disk under that page's origin. Both the key and the value must be strings; anything else is coerced, so objects are normally passed through JSON.stringify on the way in and JSON.parse on the way out. The store persists across reloads, tab closes and browser restarts, unlike sessionStorage, which empties when the tab does. Most browsers allow roughly 5 MB per origin, and because values are stored as UTF-16 a long string can consume two bytes per character. The whole API is synchronous, so every read and write happens on the main thread.

Why It Matters

It is the default answer when a generated app needs to remember something, and it is right about half the time. Saving a theme choice, a draft, or the last tab a user was on costs nothing and feels instant. Saving a team's shared records does not work at all, because there is no sharing: two colleagues at the same URL hold two unrelated stores. The 5 MB ceiling arrives sooner than people expect once images go in as data URIs, and the write simply throws QuotaExceededError. The synchronous API matters too — writing 3 MB of JSON on every keystroke will visibly stall typing on a mid-range phone.

How It Works

The browser keys the store by origin: scheme, host and port together. A page at notes.99helpers.site cannot see what a page at another subdomain wrote, and http and https count as different origins. setItem, getItem, removeItem and clear are the whole surface, plus a storage event that fires in other tabs of the same origin when a value changes, which is the one built-in way to keep two open tabs roughly in step. Data survives until the user clears site data, the browser evicts under disk pressure, or a privacy mode discards it — Safari, for instance, can clear script-written storage after seven days without user interaction. Private windows keep a store only until they close.

Real-World Example

Someone publishes an interview scorecard generated in a chat session at hiring-scorecard.99helpers.site on 99helpers. Each interviewer's ratings are written to localStorage, so the page reopens exactly where they left it, even offline. When the hiring manager asks for everyone's scores, nothing appears — five separate browsers hold five separate stores. Adding an Export CSV button turns a dead end into a workable process: each interviewer downloads their file and sends it on.

Common Mistakes

  • Storing objects directly — localStorage.setItem with an object writes the text object Object and the data is gone
  • Treating it as a database for a multi-user tool — every visitor gets a private copy that nobody else can read
  • Keeping auth tokens there — any cross-site scripting flaw on the page can read the whole store in one line
  • Forgetting the try/catch — a full quota or a blocked private window throws rather than failing quietly

Related Terms

Put a file online in seconds

Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.

Host a file free →