Save With localStorage

Apa ini

localStorage ialah memori browser.

Ia membolehkan app ingat data simple selepas page refresh.

Kenapa penting

State ingat semasa app sedang buka.

localStorage ingat selepas refresh.

Ia bukan real database. Ia bukan secure storage. Ia hanya untuk data kecil dan tidak sensitif dalam browser sendiri.

Apa nak buat

Guna prompt ini:

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 browser selepas tambah item.

Kalau item masih ada, app sudah refresh proof.

Kalau AI sudah tambah localStorage, test dulu sebelum prompt semula:

1. Add item.
2. Update item.
3. Refresh.
4. Confirm item masih ada.
5. Delete item.
6. Refresh lagi.

Kalau berfungsi, stamp checkpoint ini dan teruskan. Kalau separuh jalan, fix save/load logic sahaja.

Mistake biasa

• Save sebelum list behavior berfungsi.
• Lupa bahawa localStorage simpan strings.
• Anggap localStorage macam shared database.
• Simpan private atau sensitive information.
• Ubah app structure semasa tambah persistence.