Save With localStorage

What this is

localStorage is browser memory.

It lets the app remember simple data after the page refreshes.

Why it matters

State remembers while the app is open.

localStorage remembers after refresh.

It is not a real database. It is not secure storage. It is only for small, non-sensitive browser-local data.

What to do

Use this prompt:

CONTEXT:
I am building my Vibe 102 mini app.
I can add, update, and delete items.
Read project-brief.md in the project root.
Use project-brief.md as the source of truth.
If project-brief.md is missing, stop and ask me to create it before editing.

TASK:
Add localStorage.

Requirements:
- load saved items when the app opens
- save items whenever they change
- use the localStorage key name from the brief
- use JSON.stringify when saving
- use JSON.parse when loading
- do not save sensitive data

Rules:
- explain localStorage simply
- explain JSON.stringify and JSON.parse simply
- keep the code beginner-friendly
- do not add a backend or database
- do not change the app idea
- do not add filters, charts, dashboard cards, routing, APIs, or login
- give me one refresh test

Refresh the browser after adding an item.

If the item is still there, the app is refresh proof.

If AI already added localStorage, test it before prompting again:

1. Add an item.
2. Update it.
3. Refresh.
4. Confirm it is still there.
5. Delete it.
6. Refresh again.

If it works, stamp this checkpoint and continue. If it partly works, fix only the save/load logic.

Common mistakes

• Saving before the list behavior works.
• Forgetting that localStorage stores strings.
• Treating localStorage like a shared database.
• Saving private or sensitive information.
• Changing the app structure while adding persistence.