Web Storage API menyediakan dua mekanisme penyimpanan data di browser: localStorage dan sessionStorage. Keduanya menyimpan data sebagai key-value pairs (string).

localStorage vs sessionStorage:

API dasar (sama untuk keduanya):

// Simpan data
localStorage.setItem("username", "budi");
localStorage.setItem("theme", "dark");

// Baca data
const username = localStorage.getItem("username"); // "budi"

// Hapus satu item
localStorage.removeItem("username");

// Hapus semua
localStorage.clear();

// Cek jumlah item
console.log(localStorage.length); // 1

// Iterasi semua keys
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

Menyimpan data kompleks: Web Storage hanya menyimpan string. Untuk object/array, gunakan JSON:

// Simpan object
const user = { name: "Ani", level: 5, badges: ["html", "css"] };
localStorage.setItem("user", JSON.stringify(user));

// Baca object
const stored = JSON.parse(localStorage.getItem("user"));
console.log(stored.name);    // "Ani"
console.log(stored.badges);  // ["html", "css"]

// Wrapper function yang berguna:
function getStoredJSON(key, defaultValue = null) {
  try {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  } catch {
    return defaultValue;
  }
}

Storage event — deteksi perubahan antar tab:

// Di tab lain, kamu bisa mendengarkan perubahan:
window.addEventListener("storage", (event) => {
  console.log("Key:", event.key);
  console.log("Old:", event.oldValue);
  console.log("New:", event.newValue);
});

Event ini HANYA terjadi di tab lain (bukan tab yang melakukan perubahan).

Kapan pakai apa:

• localStorage — preferensi user (tema, bahasa), data cache, draft yang belum disimpan
• sessionStorage — data form multi-step, state navigasi sementara
• Cookies — authentication, data yang perlu dikirim ke server
• IndexedDB — data besar dan kompleks (offline-first apps)

Jangan simpan di Web Storage:

• Token autentikasi (rentan XSS — pakai HttpOnly cookie)
• Data sensitif (password, data kartu kredit)
• Data yang sangat besar (pakai IndexedDB)