mahirbrowserstorageweb-apiMahir3 mnt baca

localStorage dan sessionStorage

Menyimpan data di browser: localStorage yang persisten, sessionStorage yang sementara, plus trik simpan object.

Memori milik browser

Web Storage memungkinkan website menyimpan data di browser pengguna: preferensi tema, isi keranjang, atau draft tulisan. Data tersimpan sebagai pasangan key-value, mirip object sederhana.

localStorage: awet sampai dihapus

javascript

localStorage.setItem("nama", "Rizky"); // simpan
console.log(localStorage.getItem("nama")); // "Rizky", baca
localStorage.removeItem("nama"); // hapus satu
localStorage.clear(); // hapus semua

Data bertahan meski tab ditutup dan browser di-restart. Cocok untuk preferensi jangka panjang seperti tema gelap/terang.

sessionStorage: hilang saat tab ditutup

API-nya identik, bedanya masa hidup:

javascript

sessionStorage.setItem("token", "abc123");
// hilang otomatis saat tab/window ditutup

Cocok untuk data sesi sementara yang tidak perlu bertahan lama.

Menyimpan object dengan JSON

Storage hanya menyimpan string. Untuk object, kombinasikan dengan JSON:

javascript

let user = { nama: "Rizky", tema: "gelap" };

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

// baca
let tersimpan = JSON.parse(localStorage.getItem("user"));
console.log(tersimpan.tema); // "gelap"

Contoh nyata: ingat tema

javascript

// saat user ganti tema
function setTema(tema) {
  document.body.className = tema;
  localStorage.setItem("tema", tema);
}

// saat halaman dimuat
let temaTersimpan = localStorage.getItem("tema") || "terang";
setTema(temaTersimpan);

Tanpa backend, preferensi pengguna tetap teringat antar kunjungan.

Catatan teknis: Kapasitas sekitar 5MB per origin, dan setItem bisa melempar QuotaExceededError kalau penuh. Jangan simpan data sensitif (password, token penting) di localStorage karena bisa dibaca script apapun di halaman itu (rentan XSS). Untuk sesi login, httpOnly cookie lebih aman.

Studi kasus: daftar belanja persisten

Aplikasi kecil lengkap dengan penyimpanan otomatis:

javascript

let belanja = JSON.parse(localStorage.getItem("belanja") || "[]");

function simpan() {
  localStorage.setItem("belanja", JSON.stringify(belanja));
}

function tambah(nama) {
  belanja.push({ nama: nama, selesai: false });
  simpan();
  render();
}

function toggle(i) {
  belanja[i].selesai = !belanja[i].selesai;
  simpan();
  render();
}

function render() {
  let ul = document.querySelector("#list");
  ul.innerHTML = "";
  belanja.forEach((item, i) => {
    let li = document.createElement("li");
    li.textContent = (item.selesai ? "[x] " : "[ ] ") + item.nama;
    li.addEventListener("click", () => toggle(i));
    ul.appendChild(li);
  });
}
render(); // tampilkan data tersimpan saat dibuka

Setiap perubahan langsung disimpan. Tutup browser, buka lagi, datamu masih ada. Ini pola dasar aplikasi offline-first sederhana.

Kesimpulan

localStorage untuk yang awet, sessionStorage untuk yang sementara, JSON untuk object. Tiga pola ini cukup untuk kebutuhan penyimpanan client-side di sebagian besar aplikasi.