Save Your Data — Persist TODOs with LocalStorage

Why do TODOs disappear?

In the previous article, we built a TODO screen with add, delete, and completion toggle. Looks great, works great. But there's one annoying problem.

Close the browser and reopen it — all your TODOs are gone.

Try it yourself. Add a few TODOs, close the browser tab, and go back to http://localhost:3000. Everything you added is gone.

This isn't a bug. Right now, the TODO app only stores data in memory. Memory is like a temporary scratch pad that only lasts while the app is running. The moment you close the browser, memory is wiped clean.

Think of it like this: notes on paper stick around, but stuff you just kept in your head gets forgotten. Right now, our TODO app is just keeping things in its head.

What is LocalStorage?

So how do we make the data stick around? The answer is LocalStorage.

LocalStorage is a storage space built into your browser. Write data to it, and it stays there — even if you close the browser, even if you restart your computer.

Think of it as a small drawer inside your browser. Your app puts notes in the drawer, and next time you open the app, it pulls them back out.

Here's what you need to know about LocalStorage:

• Stored in the browser — no server needed, completely free
• Survives closing — data persists through restarts
• Browser-specific — Chrome and Safari have separate storage. Other people's computers won't have your data
• Limited capacity — not great for huge amounts of data, but more than enough for a TODO app

For something as simple as a TODO app, LocalStorage is perfect.

Ask Claude Code to add persistence

Let's do it. Open the my-todo-app project in Claude Code, just like before, and ask:

Claude Code will update the code. Here's what it's doing:

1. Every time you add, delete, or toggle a TODO, it writes the data to LocalStorage
2. When the page loads, it reads from LocalStorage and displays the saved TODOs

That's it — just two things. Simple, but it's enough to make your data persist.

Test it out

Once the changes are in, let's verify:

1. Open http://localhost:3000 in your browser
2. Add about 3 TODOs (e.g., "Read a book," "Clean up," "Go shopping")
3. Mark one as complete
4. Close the browser tab
5. Open http://localhost:3000 again

Did it work? Your TODOs should still be there, completion status and all.

The first time I tried this and saw my data still there after closing the tab, I was genuinely impressed. One sentence to Claude Code, and the app went from "everything disappears" to "everything stays put." That's a pretty amazing experience.

If it doesn't work

If LocalStorage doesn't seem to be working, it's usually one of two things:

1. Data isn't being loaded on page open

It's saving, but the code to read data when the page loads is missing. Tell Claude Code:

2. Data isn't being saved at the right time

The save isn't happening when it should. Tell Claude Code:

As we covered last time, you don't need to understand the error. Just describe the gap between what you expect and what's happening. Claude Code will figure out the cause and fix it.

Peek inside LocalStorage

Let's confirm the data is actually being saved.

With http://localhost:3000 open in your browser:

1. Press F12 on your keyboard (on Mac, press Command + Option + I)
2. A new panel will appear — don't worry, this is the Developer Tools
3. Click the "Application" tab at the top (if it's cut off, click >> on the right to see hidden tabs)
4. In the left menu, expand "Local Storage" → click http://localhost:3000

Your TODO data is stored right here. Add or delete a TODO, and you'll see the data update in real time.

Wrap-up

Here's what we covered:

• TODOs were disappearing because data was only in memory
• LocalStorage lets data survive browser closes
• One sentence to Claude Code was all it took to add persistence
• You can inspect LocalStorage contents in Developer Tools

We now have an app that remembers your data. Time for the final step.

In the next article, we'll publish the TODO app to the internet and get a URL that anyone can access. You'll be able to share what you built with friends and family.