HTML Academy · Lesson

Getting Setting and Removing Items

Use the Web Storage API to read and write data.

Getting Setting and Removing Items is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Storage API Surface

Both localStorage and sessionStorage expose the same four core methods: getItem(key), setItem(key, value), removeItem(key), and clear(). They are simple key-value stores backed by the browser.

setItem Stores Strings

localStorage.setItem("theme", "dark") persists a string under the key "theme". Both the key and value must be strings — non-string values are coerced via String() before storage, which silently corrupts objects and arrays.

localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");

Storing Objects with JSON

To store structured data, serialize with JSON: localStorage.setItem("user", JSON.stringify(user)). Read it back: const user = JSON.parse(localStorage.getItem("user")). Always wrap parse in try/catch in case the stored value is malformed.

const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));

getItem Returns String or null

getItem("missing") returns null when the key does not exist — never undefined. Use the nullish coalescing operator to provide defaults: const theme = localStorage.getItem("theme") ?? "light".

Property Access Syntax

You can also use bracket and dot notation: localStorage.theme = "dark" and localStorage["theme"]. Both work but obscure intent — prefer the explicit method calls, which clearly communicate that this is persistent storage rather than an object property.

removeItem and clear

localStorage.removeItem("theme") deletes a single key. localStorage.clear() wipes all keys for the current origin. clear() is destructive — never call it without a strong reason; it removes data set by every script on the page.

Iterating Stored Keys

Use localStorage.length and localStorage.key(index) to walk all stored keys, or spread Object.keys(localStorage). This is useful for migrations, debugging, and prefix-based cleanup like removing all keys starting with "cache:".

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

Quota Exceeded Errors

Browsers allocate roughly 5-10 MB per origin. Exceeding the quota throws a QuotaExceededError. Wrap setItem in try/catch when storing potentially large values like image caches or document drafts so the error does not crash the application.

try {
  localStorage.setItem("draft", largeString);
} catch (e) {
  if (e.name === "QuotaExceededError") {
    // free space, warn user, or fall back
  }
}

Namespacing Keys

Storage is shared across the entire origin. Prefix your keys with an app or feature name (app:settings, cart:items) to avoid collisions with other scripts, third-party libraries, and browser extensions running on the same origin.

Synchronous and Blocking

The Storage API is fully synchronous — every call blocks the main thread until disk I/O completes. Avoid storing very large blobs or calling setItem inside tight loops; batch updates into a single serialized object instead.

sessionStorage vs localStorage

Same API surface, different lifetime. sessionStorage is cleared when the tab closes; localStorage persists across browser restarts. Pick sessionStorage for ephemeral wizard state and localStorage for user preferences that should survive a reload.

Knowledge Check

What does localStorage.getItem("missing-key") return when the key has never been set?

Summary

getItem, setItem, removeItem and clear are the four pillars of Web Storage. Values are always strings, so wrap structured data with JSON. Plan for null returns, QuotaExceededError, and namespacing to share the origin politely with other scripts.

Frequently asked questions

Is the “Getting Setting and Removing Items” lesson free?

Yes — the full text of “Getting Setting and Removing Items” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Getting Setting and Removing Items”?

Use the Web Storage API to read and write data. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Getting Setting and Removing Items” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy