Todo App dengan Penyimpanan Permanen

Masalah: Data Hilang Saat Refresh

Todo app modul sebelumnya menyimpan tugas di variabel. Refresh halaman = variabel di-reset = semua tugas hilang. Pengguna nyata tidak akan memakai aplikasi yang "lupa ingatan" setiap dibuka.

Solusi: localStorage

localStorage adalah gudang kecil di browser (kapasitas sekitar 5MB) yang bertahan meski tab ditutup. Cara pakai:

• Simpan: localStorage.setItem("todos", JSON.stringify(todos))
• Baca: JSON.parse(localStorage.getItem("todos"))

Kenapa JSON? localStorage hanya menyimpan string. JSON.stringify mengubah array/object menjadi string, JSON.parse mengubah kembali. Ini pola wajib untuk menyimpan data terstruktur.

Langkah Membangun

Ambil kode todo sebelumnya, tambah dua hal:

1. Saat aplikasi dibuka: baca localStorage. Kalau ada data tersimpan, pakai sebagai todos awal. Bungkus dengan try-catch karena data bisa rusak.
2. Setiap ada perubahan (tambah/toggle/hapus): panggil simpan() yang menulis ke localStorage. Paling mudah: panggil di akhir render().

Tambahan fitur: tombol "Hapus yang selesai" dan edit tugas dengan klik dua kali (prompt sederhana).

Batasan localStorage

• Hanya string (harus JSON untuk object).
• Maksimal sekitar 5MB.
• Tidak aman untuk data sensitif (bisa dibaca siapa saja lewat DevTools).
• Berbeda per browser dan per domain.

Kesalahan Umum

• Lupa JSON.stringify sehingga tersimpan "[object Object]".
• Tidak menangani data null saat pertama dibuka (getItem mengembalikan null).
• Menyimpan terlalu sering di tiap keystroke untuk data besar (untuk todo ini aman).