localStorage dan sessionStorage

Simpan data di browser — bertahan setelah refresh.

Pahami konsepnya

localStorage menyimpan data di browser yang BERTAHAN setelah tab ditutup dan browser di-restart — sempurna untuk preferensi pengguna, tema, dan keranjang belanja. sessionStorage sama tapi hilang saat tab ditutup — cocok untuk data sementara seperti form yang belum disubmit.

API: localStorage.setItem("kunci", nilai), getItem("kunci"), removeItem("kunci"), clear(). Nilai SELALU string — objek perlu JSON.stringify untuk menyimpan dan JSON.parse untuk membaca. Key dapat diiterasi lewat Object.keys(localStorage).

Jumlah penyimpanan: sekitar 5-10MB per origin — cukup untuk kebutuhan ringan. Untuk data besar atau offline penuh, gunakan IndexedDB (database di browser).

Coba contoh kode

<!doctype html>
<html>
<body>
  <script>
    // simpan string
    localStorage.setItem("nama", "Ari");

    // simpan objek (harus stringify)
    const user = { nama: "Budi", umur: 20 };
    localStorage.setItem("user", JSON.stringify(user));

    // baca
    console.log(localStorage.getItem("nama"));  // "Ari"

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

    // hapus
    localStorage.removeItem("nama");
    console.log(localStorage.getItem("nama"));  // null
  </script>
</body>
</html>

Objek disimpan sebagai string JSON — stringify untuk menyimpan, parse untuk membaca. getItem mengembalikan null bila kunci tidak ada (bukan error).

Latihan singkat

Uji: simulasi localStorage — set/get/remove dengan Map.