Learn
← Previous Next →

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