HTML Web Storage

A tiny notebook in the browser

Web Storage lets JavaScript save small pieces of text on the visitor’s device. No server and no cookie header: you call setItem and later getItem. The data stays in that browser, for that site.

Two stores exist. localStorage lasts until the user (or your script) clears it.sessionStorage lasts until the tab closes.

setItem and getItem

Both stores use a key and a value. Keys and values are strings.

<script>
  localStorage.setItem('theme', 'dark');
  const theme = localStorage.getItem('theme');
  document.body.textContent = 'Saved theme: ' + theme;
</script>

getItem returns null if the key was never set. Check before you use the value. removeItem('theme') deletes one key; clear() deletes all keys for that store on this site.

localStorage versus sessionStorage

Same methods, different lifetime. If you want the value back next week, uselocalStorage. If it should vanish when the tab closes, usesessionStorage.

Only strings

Web Storage does not store numbers, objects, or arrays as themselves. Anything you pass tosetItem is turned into a string. A number becomes "42". An object becomes the useless string "[object Object]" unless you convert it first.

For a single name or theme, a plain string is enough. For structured data, people often useJSON.stringify on the way in and JSON.parse on the way out. Stay with one string while you learn the API.

Not for passwords

Anything in Web Storage is readable by JavaScript on that site. If a script injection bug ever runs, it can call getItem and send the values away. Do not store passwords, session tokens you would treat as login, or private documents.

Cookies marked HttpOnly stay hidden from scripts; Web Storage never does. Use storage for preferences: a display name, a color theme, “hide this banner.” Keep secrets on the server.

Save a name from an input

This page stores whatever you type, then fills the field again on the next load. Keep the script short: read the input, setItem on click, getItem on load.

<label for="name">Your name</label>
<input id="name" type="text" autocomplete="name">
<button id="save" type="button">Save</button>
<p id="status"></p>
<script>
  const input = document.getElementById('name');
  const saved = localStorage.getItem('demo-name');
  if (saved) input.value = saved;

  document.getElementById('save').onclick = function () {
    localStorage.setItem('demo-name', input.value);
    document.getElementById('status').textContent = 'Saved.';
  };
</script>

Click Save, then refresh the preview. The name should still be there if this origin allows storage. If it vanishes, the sandbox isolated storage — try the same file opened as a normal local HTML page.

What you should remember

• localStorage persists; sessionStorage dies with the tab
• Both store strings only
• Never put passwords in either store
• A preview or iframe sandbox may keep a separate, empty store

You have reached the end of this HTML track’s graphics and media chapters. Go back through canvas, SVG, and the media tags whenever a page needs a drawing or a clip instead of only text.