JavaScript Simplified · One concept, one day, one project · Day 30 of 32

Local Storage

Saving information in the browser so it survives a refresh. You build a to-do app whose tasks are still there after you reload.

By the end of today you can

Save a value with localStorage.setItem
Read it back with localStorage.getItem
Store lists by turning them into text with JSON.stringify
Build a persistent to-do app

Every app you have built forgets everything the moment the page reloads. Local storage lets the browser remember small pieces of information between visits: a theme choice, a draft, a to-do list. Today your app finally has a memory.

1. Saving and Reading

Definition

localStorage is a small store built into the browser. You save with setItem(key, value), read with getItem(key), and remove with removeItem(key). It keeps values as text, under a name (key) you choose.

localStorage.setItem("theme", "dark") saves "dark" under the key "theme".
localStorage.getItem("theme") reads it back, even after a refresh.
localStorage.removeItem("theme") deletes it.

2. Storing a List

localStorage only holds text, but a to-do list is an array. JSON.stringify turns an array into text to save it; JSON.parse turns that text back into an array when you read it.

Save: localStorage.setItem("tasks", JSON.stringify(tasks))
Read: const tasks = JSON.parse(localStorage.getItem("tasks"))

A safe default when nothing is saved yet

The first time, getItem returns null. Use localStorage.getItem("tasks") || "[]" so that, when nothing is stored, you parse an empty array instead of crashing on null.

3. A To-Do List That Remembers

The pattern: on load, read the saved list and draw it. When the list changes, save it again. Below, a task is added, then the page is reloaded, and the task is still there.

What this code doesA task is added, the page is reloaded, and the task survives.

index.html

1
2
3

<input id="task" placeholder="New task">
<button id="add">Add</button>
<ul id="list"></ul>

style.css

input{padding:8px}button{padding:8px 14px;cursor:pointer}ul{margin-top:10px}

app.js

const KEY = "jss.todo";
const input = document.getElementById("task");
const list = document.getElementById("list");

function loadTasks() {
  return JSON.parse(localStorage.getItem(KEY) || "[]");
}
function saveTasks(tasks) {
  localStorage.setItem(KEY, JSON.stringify(tasks));
}
function render() {
  list.innerHTML = "";
  loadTasks().forEach((text) => {
    const li = document.createElement("li");
    li.textContent = text;
    list.append(li);
  });
}

document.getElementById("add").addEventListener("click", () => {
  if (input.value.trim() === "") return;
  const tasks = loadTasks();
  tasks.push(input.value);
  saveTasks(tasks);
  input.value = "";
  render();
});

render(); // draw whatever was saved, even after a reload

BROWSERindex.html  ·  after adding a task and reloading the page

The task was added, then the page was reloaded, which normally wipes everything. But it is still there, because it was saved to localStorage and read back by render on load. Your app remembers.

Today’s Mini Project

📝 Persistent To-Do App

The page above is your project: a to-do list that saves to localStorage, so the tasks are still there after a refresh. Load, add, save, render; and it never forgets.

Challenge (15 minutes)

Add a "Clear all" button that removes the key with localStorage.removeItem(KEY) and re-renders. Expected: the list empties and stays empty after a reload.

Try This

Save the user’s name to localStorage from one page load, then read and greet them with it on the next.

Expected: the greeting uses the saved name even after a refresh.

Picture This

A refresh used to wipe the slate. Now your app keeps what matters. Theme choices, drafts, carts, a reading position: all of them are small values saved and read back, exactly as you just did.

Checkpoint

What does localStorage do?

It stores small pieces of information in the browser, kept between refreshes and visits. You save with setItem, read with getItem, and remove with removeItem.

Why use JSON.stringify and JSON.parse with localStorage?

Because localStorage only holds text. stringify turns an array or object into text to save, and parse turns that text back into an array or object when reading.

Why use getItem(key) || "[]" when loading a list?

Because the first time nothing is saved and getItem returns null. The || "[]" gives an empty array to parse instead, so the app does not crash.

Tick Before You Move On

☐ I can save and read a value with localStorage
☐ I can store a list with JSON.stringify and read it with JSON.parse
☐ I can handle the empty, first-time case safely
☐ I built the Persistent To-Do App

Quick Recap

localStorage keeps small values in the browser, across refreshes. setItem saves, getItem reads, removeItem deletes. JSON.stringify and JSON.parse let you store and read lists and objects. Read on load, save on change: that is how an app remembers.

Next: Day 31. Your projects work, but they live in one big file. Tomorrow you learn to organise code into clean, separate pieces.