Pernah di-logout dari aplikasi padahal cuma refresh halaman? Itu app yang gak nyimpen state-nya. Sebaliknya, pernah pas buka YouTube langsung lanjut volume terakhir kamu set? Itu efek storage yang bener. Local Storage = lemari kecil di browser kamu yang nyimpen data per-domain — tetep ada walaupun kamu tutup tab, restart laptop, bahkan minggu depan baru buka lagi.

💡 Tau aturan mainnya. Local Storage CUMA simpan string. Mau simpan object? Convert ke string dulu pake JSON.stringify(). Pas ambil? JSON.parse() balikin jadi object. Lupa ini = bug klasik "kenapa data aku jadi [object Object]?"

// Menyimpan data
localStorage.setItem("nama", "Budi");

// Mengambil data
const nama = localStorage.getItem("nama"); // "Budi"

// Menghapus satu item
localStorage.removeItem("nama");

// Menghapus semua data
localStorage.clear();

Menyimpan object/array (harus dikonversi ke JSON):

const user = { nama: "Budi", umur: 17 };

// Simpan
localStorage.setItem("user", JSON.stringify(user));

// Ambil
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.nama); // "Budi"

Penting diketahui:

• Local Storage hanya menyimpan string — gunakan JSON.stringify / JSON.parse untuk data kompleks
• Kapasitas sekitar 5MB per domain
• Data bersifat per-domain — tidak bisa diakses oleh website lain
• Cocok untuk menyimpan preferensi pengguna, tema, atau data sederhana

🎭 Analogi sehari-hari

Local Storage = post-it di kulkas rumah kamu. Tetap ada walaupun kamu tidur lalu bangun lagi (refresh browser). Tapi:

• Cuma kamu (domain) yang bisa baca — tetangga (domain lain) tidak.
• Kalau kulkasnya pindah rumah (browser baru / hapus data) — post-it ikut hilang.
• Kapasitas terbatas (~5 MB) — bukan tempat backup foto liburan.

⚠️ Jebakan yang sering ditemui

1. Hanya menyimpan STRING — angka/object berubah saat ambil.

localStorage.setItem("umur", 17);
typeof localStorage.getItem("umur");   // "string", bukan "number"!

localStorage.setItem("user", { nama: "Budi" });
localStorage.getItem("user");           // "[object Object]" — hilang!

Solusi: selalu JSON.stringify saat simpan, JSON.parse saat ambil.

2. getItem return null kalau key tidak ada — hati-hati JSON.parse.

JSON.parse(localStorage.getItem("kosong"));  // null (OK)
JSON.parse(localStorage.getItem("kosong") ?? "{}");  // {} (lebih aman)

3. JANGAN simpan token / password di Local Storage — bisa dicuri lewat XSS.

4. Synchronous + slow — jangan baca/tulis di event yang sering nembak (scroll, mouse move).

🎯 localStorage vs sessionStorage vs cookies vs IndexedDB — pilih yang mana?

• Preferensi user (theme, bahasa, layout) → localStorage (persistent, ~5MB)
• Wizard multi-step / draft form (hilang pas tab tutup) → sessionStorage (per-tab, ~5MB)
• Auth session / server-side identification → cookies (kirim otomatis ke server, bisa httpOnly anti-XSS)
• Data besar / offline-first app (PWA, kompleks query) → IndexedDB (~50% disk, async, struktur DB)
• Cross-tab sync → BroadcastChannel + storage event listener

Anti-pattern: simpan token JWT di localStorage — rentan XSS. Pakai cookies httpOnly + secure + sameSite. localStorage cuma untuk data non-sensitive.

TL;DR: localStorage = lemari kecil di browser per-domain, persistent (tetep ada setelah tutup tab/restart). API: setItem(k, v)/getItem(k)/removeItem(k)/clear(). CUMA simpan string — pakai JSON.stringify/JSON.parse buat object. Kapasitas ~5MB per domain. JANGAN simpan token/password (rentan XSS, pakai cookie httpOnly). Synchronous + slow — hindari di event sering (scroll). sessionStorage = mirip tapi hilang pas tab tutup.