localStorage JavaScript: Menyimpan Data di Browser

Coba refresh sebuah halaman, dan secara default semua yang tadi dipegang JavaScript-mu langsung lenyap. Variabelnya, pilihan pengguna, form yang baru terisi separuh — semuanya hilang, karena memori itu cuma hidup selama halaman terbuka. Untuk banyak fitur, ini jelas masalah. Tombol “mode gelap” yang balik lagi terang tiap kali halaman dimuat ulang jadi nggak ada gunanya. Keranjang belanja yang kosong begitu pengguna klik sebuah link malah lebih parah. Kamu butuh cara supaya browser bisa mengingat sesuatu antar kunjungan, dan alat paling sederhana untuk pekerjaan itu adalah localStorage.

localStorage adalah penyimpanan key-value mungil yang sudah tertanam di setiap browser modern. Kamu kasih sebuah nama dan sebuah nilai, dia menyimpannya di mesin pengguna, dan data itu bertahan walau halaman di-reload, tab ditutup, bahkan komputer dimatikan lalu dinyalakan lagi. Tanpa server, tanpa database, tanpa setup apa pun — cuma beberapa pemanggilan method. Di artikel ini kamu bakal belajar cara menyimpan dan membaca data, kenapa setiap nilai selalu balik dalam bentuk string, cara menyimpan objek dan array dengan benar, plus batasan dan poin keamanan yang penting di kode nyata.

Apa itu localStorage

localStorage adalah sebuah property pada objek global window, jadi dia tersedia di mana saja di JavaScript browser. Dia menyimpan data sebagai pasangan key-value, di mana baik key maupun value-nya berupa string. Bayangkan saja dia seperti buku catatan kecil yang dipegang browser untuk situsmu: kamu menulis catatan berlabel, dan catatan itu tetap ada sampai kamu sendiri yang menghapusnya.

Ada dua hal yang bikin localStorage benar-benar berguna:

• Dia menetap. Data yang ditulis ke localStorage bakal bertahan sampai kodemu menghapusnya atau pengguna membersihkan data browser-nya. Menutup tab atau mematikan komputer tidak akan menghapusnya.
• Dia per-origin. Setiap situs (lebih tepatnya, setiap origin — kombinasi dari protokol, domain, dan port) punya penyimpanan privat sendiri. Situs lain nggak bisa membaca apa yang disimpan situsmu, begitu pun sebaliknya.

Ada saudara kembarnya bernama sessionStorage yang API-nya persis sama. Bedanya cuma di umur: sessionStorage langsung terhapus begitu tab ditutup. Kita bakal balik ke dia di bagian akhir — untuk sekarang, semua yang kita bahas berlaku untuk keduanya.

Empat method inti

Seluruh API-nya cukup kecil sampai bisa dipelajari sekali duduk. Sebenarnya cuma ada empat method yang akan kamu pakai:

localStorage.setItem("theme", "dark");   // simpan sebuah nilai
localStorage.getItem("theme");           // baca lagi  → "dark"
localStorage.removeItem("theme");        // hapus satu key
localStorage.clear();                    // bersihkan semua untuk origin ini

Mari kita bedah satu per satu.

Menyimpan nilai dengan setItem

setItem menerima dua argumen — sebuah key dan sebuah value — lalu menyimpannya. Kalau key-nya sudah ada, value-nya bakal ditimpa:

localStorage.setItem("username", "John Doe");
localStorage.setItem("language", "en");

Itu seluruh operasinya. Datanya sekarang sudah tersimpan di disk, dan masih akan ada di sana saat pengguna balik lagi besok.

Membaca nilai dengan getItem

getItem menerima sebuah key dan mengembalikan nilai yang tersimpan untuknya:

const nama = localStorage.getItem("username");
console.log(nama);   // "John Doe"

Satu detail yang wajib kamu hafalkan: kalau key-nya tidak ada, getItem mengembalikan null — bukan undefined, bukan pula string kosong. null itulah sinyal bahwa nilainya memang belum pernah di-set, dan kamu bakal sering mengeceknya dulu sebelum memakai hasilnya:

const theme = localStorage.getItem("theme");

if (theme === null) {
  // belum ada yang tersimpan — pakai nilai default
  terapkanTema("light");
} else {
  terapkanTema(theme);
}

Menghapus data

removeItem menghapus satu key saja, sementara yang lain dibiarkan utuh. clear membersihkan seluruh penyimpanan untuk origin-mu:

localStorage.removeItem("username");   // cuma key yang ini
localStorage.clear();                  // semua key yang pernah disimpan situsmu

Pakai clear dengan hati-hati. Dia menghapus segalanya yang sudah disimpan situsmu, yang biasanya memang yang kamu mau saat aksi “logout” atau “reset”, tapi jarang yang kamu mau di situasi lain.

Semuanya berupa string

Inilah hal terpenting yang harus kamu pahami soal localStorage, sekaligus sumber sebagian besar bug pemula: dia cuma bisa menyimpan string. Baik key maupun value disimpan sebagai teks. Kalau kamu coba menyimpan hal lain, browser diam-diam mengubahnya jadi string dulu — dan hasil konversinya jarang yang kamu inginkan.

Lihat apa yang terjadi pada sebuah number:

localStorage.setItem("score", 42);

const score = localStorage.getItem("score");
console.log(score);          // "42"  ← string, bukan number 42
console.log(score + 1);      // "421" ← penggabungan string, bukan 43!
console.log(typeof score);   // "string"

Si 42 masuk sebagai number tapi balik sebagai string "42". Begitu kamu melakukan score + 1, JavaScript justru menempelkan kedua string itu, bukan menjumlahkannya. Kalau kamu butuh number-nya lagi, konversikan secara eksplisit:

const score = Number(localStorage.getItem("score"));
console.log(score + 1);   // 43  ✓

Jebakan yang sama menutup lebih rapat lagi pada objek dan array. Menyimpannya langsung adalah kesalahan klasik:

const user = { nama: "Jane Doe", umur: 28 };
localStorage.setItem("user", user);

console.log(localStorage.getItem("user"));   // "[object Object]"  😱

"[object Object]" itu adalah cara default JavaScript mengubah objek jadi string, dan hasilnya sama sekali nggak berguna — semua field-nya hilang. Lalu gimana cara yang benar untuk menyimpan objek? Kamu ubah dulu jadi JSON dengan tanganmu sendiri.

Menyimpan objek dan array dengan JSON

Karena localStorage cuma paham string, kamu ubah data terstrukturmu jadi string saat masuk, lalu parse balik jadi objek saat keluar. Alatnya adalah JSON.stringify dan JSON.parse, yang sudah kita bahas di artikel JSON. Pola ini jadi tulang punggung hampir setiap pemakaian localStorage yang nyata:

const user = { nama: "Jane Doe", umur: 28, anggota: true };

// SIMPAN: objek → string JSON → localStorage
localStorage.setItem("user", JSON.stringify(user));

// BACA: localStorage → string JSON → objek
const tersimpan = JSON.parse(localStorage.getItem("user"));

console.log(tersimpan.nama);   // "Jane Doe"
console.log(tersimpan.umur);   // 28  ← jadi number betulan lagi

JSON.stringify(user) mengubah objek tadi jadi teks '{"nama":"Jane Doe","umur":28,"anggota":true}', yang dengan senang hati dipegang localStorage. Saat dibaca balik, JSON.parse menyusun ulang objek aslinya — dengan number tetap number dan boolean tetap boolean — sehingga tersimpan.umur adalah number 28, bukan string. Array bekerja dengan cara yang persis sama:

const keranjang = ["Keyboard", "Mouse", "Monitor"];
localStorage.setItem("keranjang", JSON.stringify(keranjang));

const items = JSON.parse(localStorage.getItem("keranjang"));
console.log(items.length);   // 3

function muatUser() {
  const raw = localStorage.getItem("user");
  if (raw === null) return null;          // belum ada yang tersimpan
  try {
    return JSON.parse(raw);
  } catch {
    return null;                          // nilai tersimpan ternyata rusak
  }
}

Contoh praktis: tombol tema yang tersimpan

Mari kita rangkai semuanya jadi sesuatu yang beneran bisa kamu pasang — tema gelap/terang yang diingat browser. Ini salah satu pemakaian localStorage yang paling sering dijumpai di dunia nyata:

const tombolTema = document.querySelector("#theme-toggle");

// Saat halaman dimuat: terapkan apa pun yang disimpan terakhir kali
const temaTersimpan = localStorage.getItem("theme") || "light";
document.body.dataset.theme = temaTersimpan;

// Saat pengguna klik: balik temanya lalu ingat pilihannya
tombolTema.addEventListener("click", () => {
  const sekarang = document.body.dataset.theme;
  const berikutnya = sekarang === "light" ? "dark" : "light";

  document.body.dataset.theme = berikutnya;
  localStorage.setItem("theme", berikutnya);   // simpan permanen
});

Alurnya itulah intinya. Saat dimuat, kamu membaca tema yang tersimpan (jatuh ke "light" kalau belum ada apa-apa, berkat || "light"). Setiap kali diklik, kamu membalik nilainya lalu menulisnya kembali. Karena localStorage menetap, kunjungan berikutnya akan membaca pilihan tersimpan itu dan menerapkannya bahkan sebelum pengguna menyentuh apa pun. Kalau kode DOM dan event di sini terasa asing, artikel event membahas addEventListener.

Batasan, keamanan, dan kapan tidak memakainya

localStorage memang luar biasa simpel, tapi dia bukan database, dan memperlakukannya seperti database bakal mendatangkan masalah. Beberapa batasan yang perlu jujur kamu ketahui:

Ukurannya kecil. Browser membatasi localStorage di kisaran 5 MB per origin. Itu lebih dari cukup untuk preferensi, cache kecil, dan teks draf, tapi tidak untuk gambar, dataset besar, atau apa pun yang berat. Kalau melewati kuota, setItem bakal melempar QuotaExceededError:

try {
  localStorage.setItem("big", stringRaksasa);
} catch (err) {
  if (err.name === "QuotaExceededError") {
    console.warn("Penyimpanan penuh — gagal menyimpan.");
  }
}

Dia sinkron. Setiap proses baca dan tulis memblokir thread utama sampai selesai. Untuk nilai-nilai mungil yang memang jadi tujuan localStorage, ini nggak terasa. Tapi menulis JSON berukuran megabyte di setiap ketukan keyboard pasti bikin UI-mu tersendat — satu alasan lagi untuk menjaga nilai yang disimpan tetap kecil.

Cuma string, seperti yang sudah kamu lihat, dan itulah kenapa JSON jadi teman setia di sini.

Lalu kapan localStorage sebaiknya dipakai? Dia paling pas untuk data berisiko rendah dan tidak sensitif yang memperhalus pengalaman tapi tidak kritis: preferensi UI (tema, bahasa, tata letak), penanda “banner ini sudah kamu lihat”, draf yang sedang diketik pengguna, atau cache kecil supaya tidak perlu mengambil ulang data yang barusan dimuat. Kalau datanya sensitif, besar, atau benar-benar tidak boleh hilang, tempatnya di server.

localStorage vs sessionStorage vs cookie

Akan membantu kalau kamu tahu posisi localStorage di antara para tetangganya:

• localStorage — menetap sampai dihapus secara eksplisit. Bertahan dari reload, penutupan tab, sampai komputer dinyalakan ulang. Pilihan default-mu untuk penyimpanan di sisi browser.
• sessionStorage — API-nya sama persis, tapi terhapus begitu tab ditutup. Pakai dia untuk data yang cukup hidup selama satu sesi, misalnya form multi-langkah yang sedang diisi dan tidak perlu terbawa ke tab yang benar-benar baru.
• Cookie — lebih tua, lebih kecil (sekitar 4 KB), dan dikirim ke server bersama setiap request HTTP. Pengiriman otomatis itu bikin cookie cocok untuk hal yang dibutuhkan server (seperti ID sesi), tapi boros untuk data yang murni di sisi klien. Untuk data yang cuma dibaca JavaScript-mu, localStorage lebih simpel dan lebih lega.

Cara cepat memilih: butuh di sisi klien dan harus menetap? localStorage. Di sisi klien tapi cukup untuk tab ini saja? sessionStorage. Apakah server perlu membacanya di setiap request? Cookie.

Penutup

localStorage memberi halamanmu sebuah ingatan, dan seluruh API-nya muat di kepala:

• Dia adalah penyimpanan key-value per-origin yang menetap pada window, tersedia di mana saja di JavaScript browser. Data bertahan dari reload, penutupan tab, dan reboot, sampai kodemu atau pengguna membersihkannya.
• Empat method mengerjakan segalanya: setItem(key, value) untuk menyimpan, getItem(key) untuk membaca (mengembalikan null kalau key-nya tidak ada), removeItem(key) untuk menghapus satu key, dan clear() untuk membersihkan penyimpanan origin-mu.
• Semuanya berupa string. Number balik sebagai teks, jadi konversikan dengan Number(). Simpan objek dan array dengan JSON.stringify saat masuk dan JSON.parse saat keluar — dan bungkus parse-nya dengan try/catch.
• Hormati batasannya: kira-kira 5 MB, sinkron, dan jangan pernah untuk data sensitif — apa pun yang ada di halaman bisa membacanya.
• Pilih sessionStorage kalau data sebaiknya mati bersama tab, dan cookie kalau server butuh nilainya di setiap request.

Cukup dengan beberapa pemanggilan setItem dan getItem, kamu sudah bisa membangun fitur yang terasa rapi — tema yang nempel, form yang nggak menghilangkan kerjaanmu, pengaturan yang diam-diam diingat browser. Ini salah satu API terkecil di JavaScript dan salah satu yang paling langsung terasa memuaskan saat dipakai.