0Pricing
JavaScript Academy · Lesson

Storing and Reading Data

Use setItem, getItem, and removeItem.

Storing and Reading Data is a free JavaScript Academy lesson on CoddyKit — lesson 1 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 JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Browser Key-Value Storage

Web Storage gives each origin a simple key-value store in the browser. The two APIs, localStorage and sessionStorage, share the same methods and store only strings.

Writing With setItem

Save a value with setItem(key, value). Both arguments are strings.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Reading With getItem

Retrieve a value with getItem(key). If the key does not exist it returns null, not undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Property Access

You can also read and write like object properties, but the method form is clearer and avoids clashes with built-in names. Prefer the methods.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Removing One Item

Delete a single entry with removeItem(key). Removing a non-existent key is a harmless no-op.

localStorage.removeItem("username");

Clearing Everything

clear() wipes all keys for the current origin. Use it carefully; there is no undo.

localStorage.clear();

Everything Is a String

Storage only holds strings. Numbers and booleans are coerced to text. Read them back as strings and convert as needed.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Counting Keys

The length property tells how many keys are stored, and key(index) returns the name at a position. Useful for iterating.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Iterating Over Storage

Loop through all stored keys using length and key(). Read each value as you go.

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

Checking Existence

Because a missing key returns null, you can test presence with a simple comparison.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Same Origin Only

Storage is scoped to the origin (scheme + host + port). One site cannot read another site storage, and http vs https count as different origins.

Quick Check

Reading and writing Web Storage.

Recap

Web Storage is a per-origin string key-value store. Use setItem, getItem (returns null if absent), removeItem, and clear. Iterate with length and key(i). Everything is a string, so convert types yourself, and storage is isolated per origin.

Frequently asked questions

Is the “Storing and Reading Data” lesson free?

Yes — the full text of “Storing and Reading Data” is free to read here on the web, and the JavaScript 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 JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Storing and Reading Data”?

Use setItem, getItem, and removeItem. You practise JavaScript 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 JavaScript Academy?

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

How long does the “Storing and Reading Data” 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 JavaScript Academy lesson?

Yes. Every JavaScript 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

  1. Storing and Reading Data
  2. localStorage vs sessionStorage
  3. Storing Objects with JSON
  4. Storage Events and Limits
← Back to JavaScript Academy