Hari 19: localStorage & JSON Storage Pattern
55 min
Last updated 09 Apr 2026
localStorage & sessionStorage
// localStorage — persisten (tidak hilang saat tab ditutup)
localStorage.setItem("nama", "Budi");
localStorage.getItem("nama"); // "Budi"
localStorage.removeItem("nama");
localStorage.clear(); // hapus semua
localStorage.length; // jumlah item
// Simpan object/array (serialize ke JSON)
const user = { nama: "Budi", skor: 95, level: 3 };
localStorage.setItem("user", JSON.stringify(user));
const simpan = JSON.parse(localStorage.getItem("user") || "null");
console.log(simpan?.nama); // "Budi"
Pattern: Storage Helper
const storage = {
get: (key, defaultVal = null) => {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : defaultVal;
} catch { return defaultVal; }
},
set: (key, value) => {
try {
localStorage.setItem(key, JSON.stringify(value));
return true;
} catch { return false; }
},
remove: key => localStorage.removeItem(key),
};
storage.set("preferensi", { tema: "dark", bahasa: "id" });
const pref = storage.get("preferensi", { tema: "light" });
console.log(pref.tema); // "dark"
💡
Notice: Pattern ini mengisolasi storage logic. Di real app, ganti store dengan localStorage.
Assignment
Buat sistem manajemen todo menggunakan localStorage pattern (simulasi dengan objek). Tambah 2 todo, tandai 1 selesai, filter yang belum selesai, tampilkan hasilnya.
Expected output:
[ ] Buat portfolio
JS
script.js
Solution
Output