State, JSON, and Local Storage

State, JSON, and Local Storage | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn State, JSON, and Local Storage step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Model minimal state and derive the interface from it.
Write explicit state transitions instead of scattered mutations.
Serialize, parse, and validate versioned storage data.
Recover safely when storage is missing, corrupt, unavailable, or outdated.

DEEP EXPLANATION

Build the complete mental model

State is the minimum information needed to reproduce a view

Store facts such as task records and the selected filter; derive counts, labels, and visible rows. Duplicating a completed count beside the task list creates two values that can disagree. A transition should receive the previous state and an action, then produce the next valid state. Rendering consumes that state but does not secretly change it.

Storage is an external string boundary

localStorage is synchronous, origin-scoped, and string-only. Access can fail because of privacy settings or quota, and stored data can be edited, corrupted, or produced by an older app version. Wrap access, parse JSON inside try/catch, verify arrays and property types, and fall back to a safe default. Never store passwords, access tokens, or private information simply because the API is convenient.

Versions make migrations deliberate

Store an object with a version and payload. When reading, accept only known versions, transform older valid data, and discard shapes you cannot interpret safely. Save after a successful state transition rather than after arbitrary DOM work. Cross-tab storage events can notify other documents, but the originating document must update its own state directly.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Read validated settings

Parsing and shape validation are separate, and every failure retains a known default.

function readSettings(storage) {
  const fallback = { version: 1, theme: "light" };
  try {
    const value = JSON.parse(storage.getItem("settings") ?? "null");
    if (value?.version !== 1 || !["light", "dark"].includes(value.theme)) return fallback;
    return value;
  } catch {
    return fallback;
  }
}

Example 2: Derive rather than duplicate

The completed count remains correct because it is calculated from the task records.

const state = { tasks: [{ id: "a", done: true }, { id: "b", done: false }], filter: "all" };
const completedCount = state.tasks.filter((task) => task.done).length;
const visibleTasks = state.filter === "all" ? state.tasks : state.tasks.filter((task) => task.done === (state.filter === "done"));

How to trace this lesson

List stored facts and remove any value that can be derived.
Describe every action and the valid next state it produces.
Treat parsed JSON as unknown until every required field is validated.
Test missing, malformed, old-version, quota-failure, and multi-tab scenarios.

Common mistakes and corrections

Reading JSON without try/catch or validation.: Parsing can throw and valid JSON can still have the wrong shape.
Storing derived counts beside records.: Compute derived values during render.
Treating device storage as an account database.: Use authenticated server persistence for cross-device or sensitive records.

PRACTICE LADDER

Move from recognition to independent work

1
Reduce an interface model to its minimal facts.
2
Implement add, complete, and filter transitions as pure functions.
3
Design and migrate a version-zero storage shape.
4
Simulate corrupt storage and confirm the UI remains usable.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

State should be small, explicit, and renderable

Store the minimum facts needed to reproduce the interface, then derive labels and classes during render. If the same fact lives in several variables and DOM attributes, updates can drift apart. A predictable transition receives the previous state and produces the next one.

Persistence is an unreliable external boundary

localStorage stores strings for one origin and can be unavailable, full, old, or manually edited. Wrap reads in error handling, validate the allowed shape, and use a safe default. Do not store secrets or assume device-local data follows a learner across browsers.

RUNNABLE EXAMPLE

Change one assumption at a time

Toggle the theme, reload the runner, and explain the fallback when stored data is missing or invalid. The lesson runner uses isolated practice storage.

const storageKey = "practice:theme";
const allowedThemes = new Set(["light", "dark"]);

function readTheme() {
  const saved = localStorage.getItem(storageKey);
  return saved && allowedThemes.has(saved) ? saved : "light";
}

const theme = readTheme();
document.documentElement.dataset.theme = theme;
console.log({ theme });

const storageKey = "practice:theme";
const allowedThemes = new Set(["light", "dark"]);

function readTheme() {
  const saved = localStorage.getItem(storageKey);
  return saved && allowedThemes.has(saved) ? saved : "light";
}

const theme = readTheme();
document.documentElement.dataset.theme = theme;
console.log({ theme });

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const settings = JSON.parse(localStorage.settings);

Reveal repair and explanation

let settings = { theme: "light" };
try {
  const saved = JSON.parse(localStorage.getItem("settings") ?? "null");
  if (saved?.theme === "dark") settings = saved;
} catch { /* keep safe default */ }

Storage may be absent or malformed. Parse inside a boundary, validate fields, and retain a known default.

INDEPENDENT LAB

Build without copying the example

Build a theme preference with one state object, a render function, and validated persistence.

const allowedThemes = new Set(['light', 'dark']);
let state = { theme: 'light' };
// Add read, render, update, and save functions.

const allowedThemes = new Set(['light', 'dark']);
let state = { theme: 'light' };
// Add read, render, update, and save functions.

Press Run to execute your code.

Self-review checklist The view is fully derived from state. Malformed storage falls back without breaking the page. The stored value contains no private information.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. What type does localStorage store? Strings Arbitrary objects Functions

2. What should happen when persisted state is invalid? Use a safe default Trust it anyway Crash the whole page

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering